在vite.config.ts中进行文件配置,首先是引入插件,其次是在plugins中添加配置 iconDirs中存放的就是图标文件地址数组,这里的目录是 src/assets/icons // 引入svg需要用到的插件import{ createSvgIconsPlugin }from'vite-plugin-svg-icons'exportdefaultdefineConfig({plugins: [vue(),createSvgIconsPlugin({// 配置sv...
首先安装vite-plugin-svg-icons为开发依赖: yarn add vite-plugin-svg-icons -D 3.2 配置 vite 在vite.config.ts中配置该插件: ...import{ createSvgIconsPlugin }from'vite-plugin-svg-icons'...exportdefaultdefineConfig({ ...plugins: [ ...createSvgIconsPlugin({// 要缓存的图标文件夹iconDirs: [path...
import{defineConfig}from'vite'import{createSvgIconsPlugin}from'vite-plugin-svg-icons'// 引入 svg 图标所需要的插件importvuefrom'@vitejs/plugin-vue'importpathfrom'path'// https://vitejs.dev/config/exportdefaultdefineConfig({plugins:[vue(),createSvgIconsPlugin({iconDirs:[path.resolve(process.cwd(...
通过createSvgIconsPlugin() 入参指定了svg 文件所在的目录和 symbolId。 3.3 修改 main.ts 在main.ts 中添加如下语句: import 'virtual:svg-icons-register' 3.4 完成 svg-icon 组件 通过上述步骤,便完成了 vite-plugin-svg-icons 的配置,接下来实现 svg-icon 组件即可。前面已经完成了在线 svg、样式等,现在...
1. vite-plugin-svg-icons插件 本文的项目使用vue3+vite来构建,可以使用第三方的vite-plugin-svg-icons插件,来引入svg图标。 安装 安装vite-plugin-svg-icons插件 # npmnpm i vite-plugin-svg-icons -D# yarnyarn add vite-plugin-svg-icons -D# pnpmpnpm install vite-plugin-svg-icons -D ...
最近开发中使用到一个好玩的Vite三方小插件vite-plugin-svg-icons很实用,可以辅助我们开发过程中快速加载svg小图标。其原理是在Vite编译器的时候通过一次性的DOM操作将SVG插入DOM结构中,然后通过使用内联SVG进行加载访问,极大的方便了我们的小图标引用模式。 若只是少量的svg图片加载建议食用,若是svg图片数量过多并不建...
一、安装 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' ...
npm i vite-plugin-svg-icons-D# or pnpm install vite-plugin-svg-icons-D 1. 2. 3. 4. 5. 使用 vite.config.js中的配置插件 import{createSvgIconsPlugin}from'vite-plugin-svg-icons'importpathfrom'path'exportdefault()=>{return{plugins:[createSvgIconsPlugin({// 指定需要缓存的图标文件夹iconDirs...
import{ createSvgIconsPlugin }from'vite-plugin-svg-icons'importpathfrom'path'exportdefault() => {return{plugins: [createSvgIconsPlugin({// 指定需要缓存的图标文件夹iconDirs: [path.resolve(process.cwd(),'src/icons')],// 指定symbolId格式symbolId:'icon-[dir]-[name]',/** ...
//vitejs.dev/config/export default defineConfig({plugins: [vue(),createSvgIconsPlugin({iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')], // 图标的存放目录symbolId: 'icon-[dir]-[name]'})],resolve: {alias: {"@": path.resolve("./src") // 相对路径别名配置,使用 @ 代替...