配置完成后,运行 Vite 开发服务器或构建项目,vite-plugin-svg-icons 会自动生成一个包含所有 SVG 图标的组件文件(根据你的配置,通常是 src/components/icons/generated-svg-icons.js)。 然后,你可以在你的组件中引入并使用这些图标。例如: vue <template> <div> <!-- 使用生成的图标组件 -...
一、安装 vite-plugin-svg-icons npm i vite-plugin-svg-icons -D // 或者 yarn add vite-plugin-svg-icons -D 二、在main.js引入 import 'virtual:svg-icons-register' 三、配置SVG图片文件夹 四、在vite.config.js中配置 //import path,{ resolve } from 'path' import path from 'path' import {c...
在安装了 vite-plugin-svg-icons 插件后,我们可以在 vite.config.js 中进行配置。以下是一个示例配置: import{defineConfig}from'vite'importsvgIconsfrom'vite-plugin-svg-icons'exportdefaultdefineConfig({plugins:[svgIcons({// 指定要处理的 SVG 文件夹路径iconDirs:[require.resolve('src/assets/svgs')],/...
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({//指定需要缓存的图标文件夹,地址可...
通过上述步骤,便完成了vite-plugin-svg-icons的配置,接下来实现 svg-icon 组件即可。前面已经完成了在线 svg、样式等,现在只需要在template中补充本地 svg 的代码即可: <svgv-elseclass="svg-icon":class="className"aria-hidden="true"><use:xlink:href="`#icon-${icon}`"/></svg> ...
1.icon 配置项:确保在 icon 配置项中使用的图标符号路径是正确的。在 SVG 图标资源中,需要将图标符号的路径指定为 src 属性,而不是 href 属性。例如,data-src 属性可能无效,因为 SVG 图标通常使用 <use xlink:href="url('图标路径')" /> 的方式引用图标符号。 2.style 配置项:确保在 style 配置项中指定...
配置文件 vite.config.js import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import path from 'path' import { createSvgIconsPlugin } from 'vite-plugin-svg-icons' export default defineConfig({ plugins: [ vue(), // 使用svg-icon createSvgIconsPlugin({ // 指定需要缓...
配置:vite.config.js import ViteRestart from 'vite-plugin-restart' export default { plugins: [ ViteRestart({ restart: [ 'vite.config.js', ] }) ], }; unplugin-vue-components 组件自动按需导入 安装: npm i unplugin-vue-components -D ...
配置 // vite.config.tsimportImportIconsfrom'vite-plugin-import-icons'exportdefaultdefineConfig({plugins:[ImportIcons({/* options */}),],}); collections 用于配置图标集,一个图标集对应一个存放图标的文件夹。 importpathfrom'path';ImportIcons({collections:{icons:path.resolve(__dirname,'./src/assets...