Icon 图标

建议与 rollup-plugin-svgpack 组件配合使用

1. 安装 rollup-plugin-svgpack 组件

npm i -D rollup-plugin-svgpack

2. 配置 rollup-plugin-svgpack 组件

// vite.config.ts
import { sveltekit } from '@sveltejs/kit/vite'
import svgpack from 'rollup-plugin-svgpack'

export default defineConfig({
  plugins: [
    sveltekit(),
    // 使用 rollup-plugin-svgpack 默认的配置
    svgpack(),
  ],
  // 其它配置...
})

3. 下载 svg 图标文件，并将其放在 /src/lib/symbol 文件夹中

此时，rollup-plugin-svgpack 组件会将 /src/lib/symbol 文件夹中所有的图标文件打包，并生成 /static/icons/symbol.svg 文件。

Icon 组件默认会引用 /static/icons/symbol.svg 文件。您也可以自定义其它文件名。

示例

基础用法

<Icon name="github" />

大小

<Icon name="github" size={24} />
<Icon name="github" size={28} />
<Icon name="github" size={32} />
<Icon name="github" size={36} />

颜色

<Icon name="github" style="color: red" />
<Icon name="github" class="text-blue-600" />

注意：通常，需要给 Icon 设置颜色。

设置颜色的方法是由 svg 文件决定的。常规方式可以通过设置 stroke 或者 fill 的颜色。

如果您的 svg 文件设置了 stroke="currentColor" 或 fill="currentColor"，则可以直接通过 color 样式设置颜色。

Icon

属性 / IconOption

属性	说明	类型	默认值
path	Svg 文件路径	string	'/icons/symbol.svg'
name	图标名称	string	undefined
svg	Svg 编码。请通过 import IconCode from '../path/to/file.svg?raw' 引入。	boolean	false
size	尺寸。单位 px	number	24
class	CSS 类	string	undefined
style	CSS 样式	string	undefined
top	顶部偏移量。单位px	number	0

<svg> 标签其它属性均为 Icon 组件的属性