快速开始
安装
bash
pnpm add @fuxishi/svg-icon1
bash
npm install @fuxishi/svg-icon1
bash
yarn add @fuxishi/svg-icon1
注册组件
在你的 main.ts 中注册组件和图标：
ts
import { createApp } from 'vue'
import { FxIcon, FxIconSelect, initIconifyIcons } from '@fuxishi/svg-icon'
import '@fuxishi/svg-icon/dist/style.css'
// 加载图标集（可选）
import epIcons from '@iconify-json/ep/icons.json'
const app = createApp(App)
// 注册组件
app.component('FxIcon', FxIcon)
app.component('FxIconSelect', FxIconSelect)
// 初始化图标集
initIconifyIcons([
{ prefix: 'ep', icons: epIcons }
])
app.mount('#app')1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
使用图标
vue
<template>
<!-- Iconify 图标 -->
<FxIcon name="ep:edit" />
<FxIcon name="ep:delete" :size="24" color="#409eff" />
<!-- 本地 SVG 图标 -->
<FxIcon name="svg:my-icon" :size="32" />
</template>1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
使用图标选择器
v1.0.7+（推荐）
安装对应的 UI 框架 picker 包：
bash
pnpm add @fuxishi/svg-icon-element-plus-picker1
bash
pnpm add @fuxishi/svg-icon-naive-picker1
bash
pnpm add @fuxishi/svg-icon-antdv-picker1
bash
pnpm add @fuxishi/svg-icon-tdesign-picker1
bash
pnpm add @fuxishi/svg-icon-vanilla-picker1
安装后 setupIcons(app) 会自动检测并注册 FxIconSelect，直接在模板中使用即可：
vue
<template>
<FxIconSelect v-model="selectedIcon" placeholder="请选择图标" />
</template>
<script setup>
import { ref } from 'vue'
const selectedIcon = ref('')
</script>1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
v1.0.6 及之前
WARNING
v1.0.6 及之前版本内置了 UI 框架预设，无需安装 picker 包。
vue
<template>
<FxIconSelect
v-model="selectedIcon"
placeholder="请选择图标"
/>
</template>
<script setup>
import { ref } from 'vue'
const selectedIcon = ref('')
</script>1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
使用 Vite 插件（推荐）
使用 Vite 插件可自动生成图标类型声明，获得完整的 IDE 智能提示。
1. 配置插件
ts
// vite.config.ts
import { fxDtsPlugin } from '@fuxishi/svg-icon/vite'
export default defineConfig({
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url)),
'~': fileURLToPath(new URL('./src/assets', import.meta.url)),
},
},
plugins: [
vue(),
fxDtsPlugin({
svgGlobPattern: '~/svgs', // 也支持: '/src/assets/svgs', '@/assets/svgs', '~/svgs/**/*.svg'
dtsDir: '@/types', // 也支持: 'src', '/types', 'src/types'
splitDts: true,
}),
],
})1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2. 使用虚拟模块
ts
// main.ts
import { setupIcons } from 'virtual:fx-svg-icon'
const app = createApp(App)
setupIcons(app) // 自动注册组件 + 加载图标集 + 加载本地 SVG1
2
3
4
5
2
3
4
5
下一步
- 安装 — 了解详细的安装和依赖说明
- Iconify 图标集 — 了解如何使用 Iconify 图标
- FxIcon 组件 — 了解图标组件的完整 API
- Vite 插件 — 了解插件的完整配置