2、使用vite-plugin-svg-icons 在src目录下的assets文件夹下新建icons文件夹来存放svg图片。在main.js里面添加该句代码: import 'virtual:svg-icons-register' 在vite.config.js添加如下代码: 代码如下: import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' //引入path用于写别名配置,...
(1)新建vite文件夹,建一个plugins文件夹,新建一个svg-icon.js文件,内容如下 // 用到插件 "vite-plugin-svg-icons": "2.0.1" 自行下载依赖 import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'; import path from'path';//此函数用于创建 SVG 图标插件实例exportdefaultfunctioncreateSvgIcon(isB...
首先，确保你的项目已经使用 Vite 搭建，并且成功集成了 Vue 3。接下来，让我们为项目增添一抹亮色，安装 vite-plugin-svg-icons。这款插件专为加载和处理 SVG 图标而生，简直是你在 SVG 世界中的得力助手，能轻松搞定所有相关事务。只需在终端中运行以下命令：或者，如果你习惯使用 npm：完成安装后，你的项目将...
在这个例子中,account是你放在src/assets/svg目录下的SVG图标的文件名。你可以通过icon-name属性来指定要使用的图标,并通过color和class-name属性来自定义图标的颜色和类名。 通过以上步骤,你就可以在Vue 3项目中使用vite-plugin-svg-icons插件来方便地管理和使用SVG图标了。
安装完成后需要在vite.config.ts进行如下配置: import { createSvgIconsPlugin } from 'vite-plugin-svg-icons' import path from 'path' export default () => { return { plugins: [ createSvgIconsPlugin({ // 指定要导入的图标所在的文件夹。 iconDirs: [path.resolve(process.cwd(), 'src/icons...
vite-plugin-svg-icons 预加载在项目运行时就生成所有图标,只需操作一次 dom 高性能内置缓存,仅当文件被修改时才会重新生成 安装 node version:>=12.0.0vite version:>=2.0.0 yarn add vite-plugin-svg-icons-D# or npm i vite-plugin-svg-icons-D# or ...
5. 不如直接放弃element 的icon组件,采用自行封装svg组件。 操作流程 依赖安装 使用vite-plugin-svg-icons插件识别本地svg库 yarnaddvite-plugin-svg-icons-D#或npminstallvite-plugin-svg-icons-D#或pnpminstallvite-plugin-svg-icons-D 依赖配置 在vite.config.js中配置vite-plugin-svg-icons ...
一、安装 vite-plugin-svg-icons 二、创建图标文件夹 三、main.ts 引入注册脚本 四、vite.config.ts 插件配置 五、TypeScript支持 六、组件封装 七、使用 Element Plus 图标库往往满足不了实际开发需求,可以引用和使用第三方例如 iconfont 的图标,本节通过整合 vite-plugin-svg-icons 插件使用第三方图标库。
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({ //前...
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: [ ...