在安装了 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')],/...
一、安装 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...
}// 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....
在webpack 中加载 svg 资源可以使用 svg-sprite-loader,而 vite 中可以使用插件 vite-plugin-svg-icons。 3.1 安装开发依赖 首先安装 vite-plugin-svg-icons 为开发依赖: yarn add vite-plugin-svg-icons -D 3.2 配置 vite 在vite.config.ts 中配置该插件: ... import { createSvgIconsPlugin } from 'vi...
vite-plugin-svg-icons 用于生成 svg 雪碧图。 特点: 1.预加载 在项目运行时就生成所有图标,只需操作一次 dom 2.高性能 内置缓存,仅当文件被修改时才会重新生成vite-plugin-svg-icons 官方文档pnpm add vite-plugin-svg-icons 2. 安装 fast-glob该软件包提供了遍历文件系统的方法,并根据Unix Bash shell使用的...
import{ createSvgIconsPlugin }from'vite-plugin-svg-icons'importpathfrom'path'exportdefault() => {return{ plugins: [ createSvgIconsPlugin({// Specify the icon folder to be cachediconDirs: [path.resolve(process.cwd(),'src/icons')],// Specify symbolId formatsymbolId:'icon-[dir]-[name]',...
// 确保外部化处理那些你不想打包进库的依赖 external: [ 'vue', 'element-plus', '@element-plus/icons-vue', 'lodash', 'lodash-es', 'vue-i18n', 'vue3-i18n', 'vue-router', 'pinia', 'pinia-plugin-persist', 'mitt', 'vue-types', ...
"@vitejs/plugin-vue":"^3.0.0", "fast-glob":"^3.2.11", "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' ...
在Vite中,vite-plugin-svg-icons是一个非常实用的插件,它可以将SVG图标转换为Vue组件并自动导入。 1. SVG图标的优势 SVG(可缩放矢量图形)是一种基于XML的矢量图像格式,它适用于各种不同分辨率的屏幕,并且可以无损缩放。相比于其他图片格式,如JPEG或PNG,SVG图标有以下几个优势: -可以在不失去图像质量的情况下进行...