vite-plugin-import-icons
v1.0.1
Published
用于引入 SVG 图标的 Vite 插件,支持自动引入和热更新。
Downloads
5
Readme
vite-plugin-import-icons
用于引入 SVG 图标的 Vite 插件,支持自动引入和热更新。
安装
pnpm add vite-plugin-import-icons -D
配置
// vite.config.ts
import ImportIcons from 'vite-plugin-import-icons'
export default defineConfig({
plugins: [
ImportIcons({ /* options */ }),
],
});
collections
用于配置图标集,一个图标集对应一个存放图标的文件夹。
import path from 'path';
ImportIcons({
collections: {
icons: path.resolve(__dirname, './src/assets/icons'),
},
});
transform
加载图标时自定义转换 SVG 文件,例如给图标添加 fill
属性。
ImportIcons({
transform(svg, collection, icon) {
// apply fill to this icon on this collection
if (collection === 'icons' && icon === 'account') {
return svg.replace(/^<svg /, '<svg fill="currentColor" ');
}
return svg;
},
});
使用
以 ~icons/{collection}/{icon}
的格式引入需要的图标,collection
表示图标集,icon
表示图标名。
<template>
<icons-home></icons-home>
<icons-setting></icons-setting>
</template>
<script setup lang="ts">
import IconsHome from '~icons/icons/home';
import IconsSetting from '~icons/icons/setting';
</script>
// vite.config.ts
import path from 'path';
import ImportIcons from 'vite-plugin-import-icons';
export default {
plugins: [
ImportIcons({
collection: {
icons: path.resolve(__dirname, './src/assets/icons'),
}
})
],
};
自动引入
配合 unplugin-vue-components/vite
插件可以实现自动引入。
<template>
<icons-home></icons-home>
<other-icons-bar></other-icons-bar>
</template>
// vite.config.ts
import path from 'path';
import ImportIcons, { ImportIconsResolver } from 'vite-plugin-import-icons';
import Components from 'unplugin-vue-components/vite';
export default {
plugins: [
Components({
resolvers: [
ImportIconsResolver(),
],
}),
ImportIcons({
collection: {
icons: path.resolve(__dirname, './src/assets/icons'),
'other-icons': path.resolve(__dirname, './src/assets/other-icons'),
}
})
]
}
批量引入
可以通过 import.meta.icons
函数一次性引入多个图标,函数的第一个参数为图标集,第二个参数为 glob 字符串,函数返回值是一个以 key 为图标名,value 为对应图标组件的对象。
<template>
<component v-for="(icon, name) in icons" :is="icon" :key="name"></component>
</template>
<script>
const icons = import.meta.icons('icons', 'menu-*')
</script>
// vite.config.ts
import path from 'path';
import ImportIcons, { ImportIconsResolver } from 'vite-plugin-import-icons';
import Components from 'unplugin-vue-components/vite';
export default {
plugins: [
ImportIcons({
collection: {
icons: path.resolve(__dirname, './src/assets/icons'),
}
})
],
};