1. 安装vite-plugin-svg-icons插件 npm i vite-plugin-svg-icons -D 2.vite.config.ts中配置 import path from "path"; import { createSvgIconsPlugin } from"vite-plugin-svg-icons"; exportdefaultdefineConfig({ plugins: [ ... createSvgIconsPlugin({ iconDirs: [path.resolve(process.cwd(),"src/...
一、安装 vite-plugin-svg-icons npm i fast-glob@3.2.11 -D 1. npm i vite-plugin-svg-icons@2.0.1 -D 1. 二、创建图标文件夹 在src/assets文件夹下新建icons文件夹,用于存放下载的 SVG 图标 三、main.ts 引入注册脚本 // main.ts import 'virtual:svg-icons-register'; 1. 2. 四、vite.config....
import{createSvgIconsPlugin}from 'vite-plugin-svg-icons'importpathfrom'path'exportdefaultfunctioncreateSvgIcon(){returncreateSvgIconsPlugin({iconDirs:[path.resolve(process.cwd(),'src/assets/icons/svg')],symbolId:'icon-[dir]-[name]',})} 1. 2. 3. 4. 5. 6. 7. 8. 9. src/componments...
npm install vite-plugin-svg-icons -D (二)配置 在vite.config.ts中进行配置 import { createSvgIconsPlugin } from 'vite-plugin-svg-icons' import path from 'path' export default () => { return { plugins: [ createSvgIconsPlugin({ // 指定需要缓存的图标文件夹 iconDirs: [path.resolve(process...
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: [ ...
在vite.config.js中配置vite-plugin-svg-icons // 其他引入importpathfrom"path";import{createSvgIconsPlugin}from"vite-plugin-svg-icons";exportdefaultdefineConfig({// 其他配置plugins:[createSvgIconsPlugin({// 指定需要缓存的图标文件夹iconDirs:[// 这里分为了一般icon文件夹和文件图标类型文件夹,方便管理...
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 ...
来吧，开启你的操作大门！只需简单几步，SVG 图标轻松搞定！步骤 1：安装依赖 首先，确保你的项目已经使用 Vite 搭建，并且成功集成了 Vue 3。接下来，让我们为项目增添一抹亮色，安装 vite-plugin-svg-icons。这款插件专为加载和处理 SVG 图标而生，简直是你在 SVG 世界中的得力助手，能轻松搞定所有相关事务。
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({ //前...
npm install vite-plugin-svg-icons -D （二）配置 在vite.config.ts中进行配置 import{createSvgIcon...