npm install svg-sprite-loader --save-dev 6.配置vue.congfig.js chainWebpack: (config) => { //配置 svg-sprite-loader // 第一步:让其他svg loader不要对src/icons进行操作 config.module .rule('svg') .exclude.add(resolve('src/SvgI
npm install vite-plugin-svg-icons 1. 2、在vite.config.ts中配置插件 import { fileURLToPath, URL } from 'node:url' import VueSetupExtend from 'vite-plugin-vue-setup-extend' import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import { createSvgIconsPlugin } from '...
在Vue项目中使用SVG图标可以通过以下几种方式实现: 直接在模板中使用<img>标签: 这种方法最简单,直接将SVG文件作为图像资源引用。 html <template> <div> <img src="@/assets/my-icon.svg" alt="My Icon"/> </div> </template> 使用<svg>标签嵌入...
在main.ts文件中引入 // 本地SVG图标 import "virtual:svg-icons-register"; // 引入SvgIcon组件 import svgIcon from "@/components/SvgIcon/index.vue"; createApp(App) .use(ElementPlus) .use(router) //注册图标组件 .component('svg-icon', svgIcon) .mount('#app') (五) 使用 组件内使用 封装...
1、创建一个vue 2.x项目 2、安装插件 cnpm install svg-sprite-loader --save 3、封装svgIcon组件 在componemts里新建svgIcon文件夹,新建index.vue,封装成组件 <template> <svg :class="svgClass"aria-hidden="true"> <use :xlink:href="iconName"/> ...
import 'virtual:svg-icons-register' 1. 使用方法 在assets/icons/ 下引入 svg 格式的文件,并给图标命名。 只需在需要的地方,使用 svg 引入图标即可。需要注意的点是:xlink:href用哪个图标,其属性值必须是 #icon-图标名字。 <svg width="100" height="100"> ...
vue3中使用svg图标 samuelhh 1 人赞同了该文章 演示代码使用 vite创建的 vite+ts+vue3项目,具体创建方法:cn.vitejs.dev/guide/ 1、安装 vite-plugin-svg-icons和fast-glob 插件: //首先安装vite-plugin-svg-icons npm i vite-plugin-svg-icons -D //再安装fast-glob npm i fast-glob -D 安装完成后...
简介:vue3+vite项目中使用svg图标 引言 项目中有很多地方需要用到svg图标,Element Plus 组件库提供了一套常用的图标,但是往往不能满足需求,而网上比较全的就是阿里图标库,下面就介绍如何将阿里图标库中的svg图标引入到自己的项目中。 1. vite-plugin-svg-icons插件 ...
| |-- SvgIcon | |-- src | |-- index.vue | |-- icons | |-- up.svg | |-- svg文件2 | |-- index.js 将设计师给到的svg文件放入icons文件夹中,注意文件命名不要有中文和其他特殊字符,后面会用到。找到外层有fill属性的g标签或者path标签将fill属性设置为”currentColor”,一般svg文件都会有多个...
在写前端的时候觉得 Element Plus 的图标库不够或不是很符合,想要使用自定义的图标,但是又不想引入额外的图标库,这时候就可以使用 Svg 图标,这篇文章就是介绍如何在 Vite + Vue 中使用 Svg 图标。以及封装成组件使用。 初始化项目 首先我们需要初始化一个 Vite + Vue + TS 的项目,这里使用 pnpm 作为包管理...