一、安装 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 是一个用于将本地 SVG 文件转换为可直接在 Vue 组件中使用的图标的 Vite 插件。以下是使用 vite-plugin-svg-icons 的详细步骤: 1. 安装 vite-plugin-svg-icons 插件 首先,你需要在项目中安装 vite-plugin-svg-icons 插件。可以使用 npm 或 yarn 进行安装: bash npm install vite-plug...
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 文件夹路...
vite-plugin-svg-spriteusually has a better render performance. Vue For Vue projects, set theexportTypeto'vue'to import SVGs as components: importIconFoofrom'./icons/foo.svg';<IconFoo/> Non-React / Non-Vue For users not using React or Vue, set theexportTypeto'vanilla'. The imported val...
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: [ ...
npm install vite-plugin-svg-icons --save npm install fast-glob --save 在vite.config.js配置 import{ defineConfig }from'vite'importvuefrom'@vitejs/plugin-vue'import{createSvgIconsPlugin}from'vite-plugin-svg-icons';importpathfrom'path'function resolve(dir) {returnpath.join(__dirname, dir) ...
import{createSvgIconsSsrPlugin}from'vite-plugin-svg-icons-ssr'importpathfrom'path'exportdefault()=>{return{plugins:[createSvgIconsSsrPlugin({// 指定需要缓存的图标文件夹iconDir:path.resolve(process.cwd(),'src/icons'),// 指定 symbolId 格式symbolIdTemplate:'icon-[dir]-[name]'})]}} ...
首先安装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: [ ...
yarn add vite-plugin-svg-icons-Dyarn add fast-glob-D 1. 2. 在vite.config.js文件中配置插件 把配置插件中 //plugins: [vue(), ] plugins: createVitePlugins(), 完整内容 import{defineConfig,loadEnv}from"vite";importpathfrom"path";importvuefrom '@vitejs/plugin-vue';importcreateVitePluginsfrom...
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({ //前缀 prefix: { type...