1.安装vite-plugin-svg-icons npm i vite-plugin-svg-icons -D 2. 新建文件夹 src/assets/icons/svg来存放svg 图片 3.新建组件src/components/SvgIcon/index.vue <template><svg:style="{width, height}"><use:xlink:href="prefix + name":fill="color"></use></svg></template>defineProps({ //前...
}// https://vitejs.dev/config/export default defineConfig({ plugins: [ vue(), createSvgIconsPlugin({ // 新建 assets/svg文件夹,将svg放入文件夹下 iconDirs: [resolve('src/assets/svg')],//定义每个 SVG 图标的符号 ID symbolId:"icon-[name]"}), ], }) 定义一个svgicon组件,新建SvgIcon....
1.安装依赖:npm install vite-plugin-svg-icons -D 2.vite.config.ts 中配置: import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'//在export default ({ command, mode }: ConfigEnv): UserConfig中的plugins数组中添加代码plugins: [ createSvgIconsPlugin({//指定需要缓存的图标文件夹,地址可...
npm i vite-plugin-vue-svgs -D yarn add vite-plugin-vue-svgs -D pnpm i vite-plugin-vue-svgs -D Vite Configuration Add the following to yourvite.config.js/vite.config.tsfile: import{createSvgIconsPlugin}from'vite-plugin-vue-svgs';import{defineConfig}from'vite';importvuefrom'@vitejs/pl...
yarn add vite-plugin-svg-icons-Dyarn add fast-glob-D 1. 2. 在vite.config.js文件中配置插件 把配置插件中 //plugins: [vue(), ] plugins: createVitePlugins(), 完整内容 import{defineConfig,loadEnv}from"vite";importpathfrom"path";importvuefrom '@vitejs/plugin-vue';importcreateVitePluginsfro...
首先安装vite-plugin-svg-icons为开发依赖: yarn add vite-plugin-svg-icons -D 3.2 配置 vite 在vite.config.ts中配置该插件: ... import { createSvgIconsPlugin } from 'vite-plugin-svg-icons' ... export default defineConfig({ ... plugins: [ ...
"vite":"^3.0.0", "vite-plugin-svg-icons":"^2.0.1" } } 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 配置文件 vite.config.js import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import path from 'path' ...
3. vite-plugin-svg-icons的用途和功能 vite-plugin-svg-icons 插件的主要用途是将 SVG 文件转换为 Vue 组件,这样你就可以在 Vue 项目中像使用其他 Vue 组件一样使用 SVG 图标了。此外,该插件还支持自定义图标 ID、颜色等属性,提供了很大的灵活性。
Vue 3.* Installation npm i -D @vuetter/vite-plugin-vue-svg Usage vite.config.js: import pluginVue from '@vitejs/plugin-vue'; import pluginSvgVue from '@vuetter/vite-plugin-vue-svg'; export default { plugins: [ pluginVue(), pluginSvgVue(), ], }; Any vue component: <template> Ic...
以下为原理介绍,如跳过直接查看vite-plugin-iconify。 先创建一个 VIcon 组件 假设我们首先封装一个v-icon组件在src/components/VIcon.vue。 <template><slot/></template>.v-icon{display:inline-block;width:1em;height:1em;font-size:1em;}.v-icon>svg{width:100%;height:100%;} 使用unplugin-icons 作为...