@charcoal-ui/icons クイックスタート

インストール

npm

npm install @charcoal-ui/icons

yarn

yarn add @charcoal-ui/icons

概要

@charcoal-ui/iconsは、SVGアイコンをWeb ComponentsのCustom Elementsとして利用できるライブラリです。

使い方

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

@charcoal-ui/reactの <Icon>コンポーネントを利用している場合、このimportは内部で自動的に行われます。

import '@charcoal-ui/icons'

これだけで、<pixiv-icon>という HTMLタグが利用可能になります。 TypeScriptの型定義がグローバルにインストールされるので、JSX で<pixiv-icon>を書く際にも型チェックが効きます。

収録アイコン

@charcoal-ui/reactの<Icon>のページを見てください。

各種バンドラとの組み合わせ

@charcoal-ui/icons@v2.0.0以前、このライブラリはアイコンを.svgファイルとしてエクスポートしていました。
したがって利用の際は、各種バンドラで.svgファイルをimportできるように設定ファイルを変更する必要がありました。

v2.0.0以降、アイコンはJavaScriptの文字列としてエクスポートされるようになっています。
したがって、@charcoal-ui/iconsに収録されたアイコンを利用するだけなら、バンドラの設定は必要ありません。

プロジェクト内のSVGファイルをアイコンとして登録したい場合は、必要に応じて.svgをimportできるように設定してください。