carbon icons svelte

カーボンアイコンゼルテ

カーボンデザインシステムSVGアイコンは、Svelteコンポーネントとして。

このゼロ依存関係アイコンライブラリは、カーボンデザインシステムのアイコンをSvelteコンポーネントとして構築します。カーボンコンポーネントのゼロとペアになっているのが最適ですが、これらのアイコンはスタンドアロンを消費できます。

Svelte Replで試してみてください。

プレビュー・アイコンインデックス

インストール

 # npm
npm i carbon-icons-svelte

# pnpm
pnpm i carbon-icons-svelte

# Yarn
yarn add carbon-icons-svelte

# Bun
bun add carbon-icons-svelte

使用法

基本

carbon-icons-svelte/libフォルダーからアイコンをインポートします。サポートされているアイコンのリストについては、アイコンインデックスを参照してください。

< script >
  import Add from " carbon-icons-svelte/lib/Add.svelte " ;
</ script >

< Add />

カスタムサイズ

size小道具を使用して、アイコンサイズを指定します。

サポートされているアイコンサイズには、 16 24および32 20れます。

デフォルトサイズは16です。

< Add size ={ 16 } />
< Add size ={ 20 } />
< Add size ={ 24 } />
< Add size ={ 32 } />

カスタムプロップ

$$restProps 、 svg要素に転送されます。

fill使用して色をカスタマイズしたり、他の有効なsvg属性をコンポーネントに渡すことができます。

< Add fill = " red " class = " icon " />

ラベル付き

< Add aria-label = " Add " />

フォーカス可能なラベル付きアイコン

< Add aria-label = " Add " tabindex = " 0 " />

でラベル付けされています

< label id = " add-file " >Add file</ label >

< Add aria-labelledby = " add-file " />

API

小道具

すべての小道具はオプションです。

名前	タイプ	デフォルト値
サイズ	16 | 20 | 24 | 32	16
タイトル	string	undefined

Changelog

貢献

ライセンス

Apache 2.0