在vite-plugin-svg-icons 插件中,svgoOptions 是一个非常重要的配置选项,它允许你对 SVG 图标进行优化。svgo 是一个流行的 SVG 优化工具,通过 svgoOptions,你可以传递自定义的配置给 svgo,以控制优化行为。 svgoOptions 的具体用途 svgoOptions 主要用于控制 SVG 图标的优化过程,包括但不限于: 移除不必要的元...
// tsconfig.json{"compilerOptions":{"types":["vite-plugin-svg-icons/client"]}} 配置main.ts import'virtual:svg-icons-register'复制代码 封装SvgIcon组件src/components/SvgIcon <template><svg aria-hidden="true"><use:href="symbolId":fill="color"/></svg></template>import{defineComponent...
npm install vite-plugin-svg-icons --save-dev 配置 在安装了 vite-plugin-svg-icons 插件后,我们可以在 vite.config.js 中进行配置。以下是一个示例配置: import{defineConfig}from'vite'importsvgIconsfrom'vite-plugin-svg-icons'exportdefaultdefineConfig({plugins:[svgIcons({// 指定要处理的 SVG 文件夹路...
<template><svg:class="svgClass"aria-hidden="true"><use:xlink:href="iconName":fill="color"/></svg></template>import{computed,onMounted,reactive,ref,watchEffect,watch,getCurrentInstance,defineComponent}from'vue'import{useRoute,useRouter}from 'vue-router' exportdefaultdefineComponent({props:{iconClass:...
"@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' ...
svgoOptions does not work#2(9cc45d5) 0.3.0(2021-03-07) Features export vite-plugin-svg-icons/client (fd765cd) 0.2.0(2021-03-06) 0.1.3(2021-03-06) Performance Improvements Detail optimization (4ec3c2a) 0.1.2 (2021-03-05)
vite-plugin-svg-icons/dist/index.d.ts Version: 1.76 kBTypeScriptView Raw 1 import { Plugin } from 'vite'; 2 import { OptimizeOptions } from 'svgo'; 3 4 declare type DomInject = 'body-first' | 'body-last'; 5 interface ViteSvgIconsPlugin { ...
首先安装vite-plugin-svg-icons为开发依赖: yarn add vite-plugin-svg-icons -D 3.2 配置 vite 在vite.config.ts中配置该插件: ... import { createSvgIconsPlugin } from 'vite-plugin-svg-icons' ... export default defineConfig({ ... plugins: [ ...
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons' import path from 'path' export default () => { return { plugins: [ createSvgIconsPlugin({ // 指定要导入的图标所在的文件夹。 iconDirs: [path.resolve(process.cwd(), 'src/icons')], // 指定symbol id的格式 symbolId: '...
svgoOptionsboolean|SvgoOptionstruesvg 压缩配置,可以是对象Options symbolIdTemplate icon-[dir]-[name] [name]: svg 文件名 [dir] 该插件的 svg 不会生成 hash 来区分,而是通过文件夹来区分. 如果iconDir对应的文件夹下面包含这其他文件夹 例: