@charcoal-ui/react
に<Icon>
コンポーネントが収録されているので、基本的にはそちらを利用してください。
@charcoal-ui/react
を使わない場合Custom ElementはclassName
というpropsを受け取ることが通常できません。
Custom elements acceptclass
rather thanclassName
, andfor
rather thanhtmlFor
.
React公式ドキュメントより
もしstyled-components
などを使っていてclassName
を渡せないと困るケースでは、ラッパーコンポーネントを作ることができます。
import { Props as IconProps } from '@charcoal-ui/icons'
interface Props extends Omit<IconProps, 'class'> {
className?: string
}
export const Icon: React.FC<Props> = ({ className, ...props }) => (
<pixiv-icon class={className} {...props} />
)