import { createSvgIconsPlugin } from 'vite-plugin-svg-icons' import AutoImport from "unplugin-auto-import/vite" import Components from "unplugin-vue-components/vite" import { ElementPlusResolver } from "unplugin-vue-components/resolvers" // import ElementPlus from "unplugin-element-plus/vite"...
一、安装 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...
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.conf...
<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:...
通过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、样式等,现在...
npm install vite-plugin-svg-icons --save-dev 配置 在安装了 vite-plugin-svg-icons 插件后,我们可以在 vite.config.js 中进行配置。以下是一个示例配置: import { defineConfig } from 'vite' import svgIcons from 'vite-plugin-svg-icons'
echo -e "\033[32m vite-plugin-svg-icons 安装完毕\033[0m" echo -e "\033[36m开始安装 svg支持包 fast-glob\033[0m" sudo npm install fast-glob echo -e "\033[32m fast-glob 安装完毕\033[0m" echo -e "\033[36m开始安装 path 支持包 path,这个包在js麦 vue-cil会自动安装,但是在ts环境...
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]',...
2、复制svg源代码(选择好颜色大小属性后复制代码) 创建svg文件,随便命名并将源代码进行复制 以这种格式排列,方便查阅 删除无用的信息 删去红框信息后,直接在组件引用 {prefix}-{collection}-{icon} 效果如图 prefix自定义 reference https://github.com/antfu/unplugin-icons...
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) ...