在这个例子中,account是你放在src/assets/svg目录下的SVG图标的文件名。你可以通过icon-name属性来指定要使用的图标,并通过color和class-name属性来自定义图标的颜色和类名。 通过以上步骤,你就可以在Vue 3项目中使用vite-plugin-svg-icons插件来方便地管理和使用SVG图标了。
首先，确保你的项目已经使用 Vite 搭建，并且成功集成了 Vue 3。接下来，让我们为项目增添一抹亮色，安装 vite-plugin-svg-icons。这款插件专为加载和处理 SVG 图标而生，简直是你在 SVG 世界中的得力助手，能轻松搞定所有相关事务。只需在终端中运行以下命令：或者，如果你习惯使用 npm：完成安装后，你的项目将...
}// 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.安装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({ //前...
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({ // 指定要缓存的文件夹 iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')], // 指定symbolId格式 symbolId: '[name]' }) ], } }) 五、新建svg封装组件,路径参考:src\components\svg-icon\index.vue <template> ...
安装vite-plugin-svg-icons插件 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-...
使用vite-plugin-svg-icons插件识别本地svg库 yarnaddvite-plugin-svg-icons-D#或npminstallvite-plugin-svg-icons-D#或pnpminstallvite-plugin-svg-icons-D 依赖配置 在vite.config.js中配置vite-plugin-svg-icons // 其他引入importpathfrom"path";import{createSvgIconsPlugin}from"vite-plugin-svg-icons";expor...
import'virtual:svg-icons-register' 1. 创建SvgIcon组件 /src/components/SvgIcon/index.vue <template><svgaria-hidden="true"class="svg-icon":width="props.size":height="props.size"><use:xlink:href="symbolId":fill="props.color"/></svg></template>import{computed}from'vue'constprops=defineProps...
//svg插件需要配置代码import 'virtual:svg-icons-register'; 4.在src/assets中新建目录svgs, 将所有的的svg图片放在svgs文件中 5.封装svg-icon.vue组件 <template><svg:class="className":style="{ width, height: _height }"><use:xlink:href="iconName"></use></svg></template>import { computed }...