アイコン

Slidev は、unplugin-icons と Iconify を使用して、対応するパッケージをインストールするだけで、ほぼすべてのオープンソースアイコンセットに直接アクセスできます。

命名規則は Iconify の {collection-name}-{icon-name} に従っています。例えば:

• <mdi-account-circle /> - Material Design Icons から - @iconify-json/mdi
• <carbon-badge /> - Carbon から - @iconify-json/carbon
• <uim-rocket /> - Unicons Monochrome から - @iconify-json/uim
• <twemoji-cat-with-tears-of-joy /> - Twemoji から - @iconify-json/twemoji
• <logos-vue /> - SVG Logos から - @iconify-json/logos
• 他にもたくさん。

pnpm

pnpm add @iconify-json/[the-collection-you-want]

npm

npm install @iconify-json/[the-collection-you-want]

yarn

yarn add @iconify-json/[the-collection-you-want]

bun

bun add @iconify-json/[the-collection-you-want]

deno

deno add jsr:@iconify-json/[the-collection-you-want]

Slidev は Iconify をアイコンのデータソースとして使用しています。対応するアイコンセットを dependencies に @iconify-json/* パターンでインストールする必要があります。例えば、Material Design Icons は @iconify-json/mdi パッケージ、Tabler は @iconify-json/tabler パッケージ、などです。利用可能なすべてのコレクションについては、Icônes または Iconify を参照できます。

アイコンにスタイルを適用する

他の HTML 要素と同様に、アイコンにスタイルを適用できます。例えば:

<uim-rocket />
<uim-rocket class="text-3xl text-red-400 mx-2" />
<uim-rocket class="text-3xl text-orange-400 animate-ping" />