Getting Started
Install
bash
pnpm add @fuxishi/svg-icon1
bash
npm install @fuxishi/svg-icon1
bash
yarn add @fuxishi/svg-icon1
Register Components
Register components and icons in your main.ts:
ts
import { createApp } from 'vue'
import { FxIcon, FxIconSelect, initIconifyIcons } from '@fuxishi/svg-icon'
import '@fuxishi/svg-icon/dist/style.css'
// Load icon collections (optional)
import epIcons from '@iconify-json/ep/icons.json'
const app = createApp(App)
// Register components
app.component('FxIcon', FxIcon)
app.component('FxIconSelect', FxIconSelect)
// Initialize icon collections
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
Use Icons
vue
<template>
<!-- Iconify icons -->
<FxIcon name="ep:edit" />
<FxIcon name="ep:delete" :size="24" color="#409eff" />
<!-- Local SVG icons -->
<FxIcon name="svg:my-icon" :size="32" />
</template>1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
Use Icon Selector
v1.0.7+ (Recommended)
Install the picker package for your UI framework:
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
After installation, setupIcons(app) will automatically detect and register FxIconSelect. Use directly in templates:
vue
<template>
<FxIconSelect v-model="selectedIcon" placeholder="Select an icon" />
</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 and Earlier
WARNING
v1.0.6 and earlier versions have built-in UI framework presets. No picker package installation needed.
vue
<template>
<FxIconSelect
v-model="selectedIcon"
placeholder="Select an icon"
/>
</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
Use Vite Plugin (Recommended)
The Vite plugin auto-generates icon type declarations for full IDE smart hints.
1. Configure Plugin
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', // Also supports: '/src/assets/svgs', '@/assets/svgs', '~/svgs/**/*.svg'
dtsDir: '@/types', // Also supports: '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. Use Virtual Module
ts
// main.ts
import { setupIcons } from 'virtual:fx-svg-icon'
const app = createApp(App)
setupIcons(app) // Auto-register components + load icon collections + load local SVG1
2
3
4
5
2
3
4
5
Next Steps
- Installation — Detailed installation and dependency guide
- Iconify Icons — How to use Iconify icons
- FxIcon Component — Full icon component API
- Vite Plugin — Full plugin configuration