carbon icons svelte

碳 - icons-svelte

碳設計系統SVG圖標作為苗條組件。

這個零依賴圖庫將碳設計系統圖標構建為苗條組件。儘管最好與碳組件 - 粘合劑配對，但可以獨立消費這些圖標。

在Svelte Repp中嘗試一下。

預覽·圖標索引

安裝

 # 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道具來指定圖標大小。

支持32圖標尺寸包括16和24 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