@charcoal-ui/icons v3.11.0

@charcoal-ui/icons

SVG アイコンを Custom Elementsとして利用できるライブラリです。

インストール

npm

npm i @charcoal-ui/icons

yarn

yarn add @charcoal-ui/icons

使い方

アプリケーションのエントリポイントで import します。 Storybook の場合は preview.(js|ts) に書くと良いでしょう。

import '@charcoal-ui/icons'

これだけで、 <pixiv-icon> という HTML タグが利用可能になります。

TypeScript の型定義がグローバルにインストールされるので、JSX で <pixiv-icon> を書く際にも型チェッ クが効きます。

属性

<pixiv-icon name="16/Add" scale="1"></pixiv-icon>

独自のアイコンを登録する

pixiv-icon の name に存在しない SVG をアイコンとして登録することができます。

その場合も名前の形式は ${size}/${name} である必要があります。

TypeScript 環境下では、KnownIconType という型を拡張することで、カスタムアイコンに対しても補完が効 くようになります。

import PixivIcon from '@charcoal-ui/icons'
import NewFeature from './NewFeature.svg'

PixivIcon.extend({
  '16/NewFeature': require('./icons/16/NewFeature.svg'),
  '24/NewFeature': 'https://example.com/hoge.svg',
  '32/NewFeature': NewFeature,
})

declare module '@charcoal-ui/icons' {
  export interface KnownIconType {
    '16/NewFeature': unknown
    '24/NewFeature': unknown
    '32/NewFeature': unknown
  }
}

React と組み合わせて使う

Custom Element は className という props を受け取ることが通常できません。

https://ja.reactjs.org/docs/web-components.html#using-web-components-in-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} />
)