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