快速开始
安装
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
使用图标选择器
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({
plugins: [
vue(),
fxDtsPlugin({
svgGlobPattern: '/src/assets/svgs/**/*.svg',
dtsDir: '@/types',
splitDts: true,
}),
],
})1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
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 插件 — 了解插件的完整配置