创建index.js 导入所有svg图标 icons文件夹创建index.js 自动导入所有svg图标。 /** * 字体图标, 统一使用SVG Sprite矢量图标(http://www.iconfont.cn/) * * 使用: * 1. 在阿里矢量图标站创建一个项目, 并添加图标(这一步非必须, 创建方便项目图标管理) * 2-1. 添加icon, 选中新增的icon图标, 复制代码...
npm install vue-svg-icon xml-loader -D 2. 下载的.svg的文件,存放于src/icons/svg文件 3. 配置src/icons/index.js文件 importVuefrom'vue'importSvgIconfrom'@/components/SvgIcon'// svg component// register globallyVue.component('svg-icon',SvgIcon)// 在./svg下查找 “.svg”文件constreq =requir...
1、安装项目依赖 npm install vue-svgicon -D 2、在项目目录中引入svg图片(任意目录) 3、配置svg图标解析和输出路径 因为vue-svgicon本质会把svg图标解析成js文件,在项目中是通过import导入生成的js文件来达到对svg图标的引用,具体可以在package.json中做以下配置: 4、在main.js中引入svgIcon组件,并且全局注册下 ...
vue项目中时常需要引用icon图标,特地写一个组件用于引用svg icon。 1.将你想要的svg加入购物车,点击下载代码 打开下载的文件夹,将其中的js文件复制进你的项目 在index.html中引入该js文件 2.创建icon.vue组件 <template> <svg class="svg-icon" aria-hidden="true"> <use :xlink:href="iconName"></use> ...
import Icon from 'vue-svg-icon/Icon.vue'Vue.component('icon', Icon) 然后在根目录的 /src目录下新建一个 svg目录(目前这个路径只能是这样,不可配置为其他路径和目录),然后再这个目录中放入你想要使用的 svg图标的 svg文件即可。 例如一个微信图标的 svg如下: ...
在你使用的Vue中找到一个vue.config.js文件,如果没有就创建。 虽然官方文档说的是在webpack开头的文件中操作,但是我们在Vue中没有,所以我们就要将Vue-cli的内容翻译成svg-sprite-loader文档的内容 第三步 在vue.config.js中 写如下代码 const path = require("path"); ...
本文主要讲解vue-element-admin是如何使用svg图标的。 2. 项目使用svg图标 2.1 下载svg图标 ①svg图标可以去https://www.iconfont.cn查找合适的icon,选择svg下载。 ② 下载完成后,在vue-element-admin项目,可以看到图标放到了src/icons/svg目录 2.2 注册svg组件 ...
1.新建存放svg图标的目录 在项目 src 目录下新建 src/icons/svg 目录(存放 svg 图标文件)。 2.创建svg文件的入口文件 在src/icons 下创建 icons 目录的入口文件 index.js ,负责svg文件的加载 importVuefrom'vue' importSvgIconfrom'@/components/SvgIcon' ...
// 本地SVG图标import'virtual:svg-icons-register' 二,使用 (一)封装组件 创建一个SPIcon组件,封装svg。避免重复编码 <template><svgaria-hidden="true"class="svg-icon":style="{height:size,width:size}"><use:xlink:href="symbolId":fill="color"></use></svg></template>import{computed}from'vue'...
2.新建@/components/SvgIcon/index.vue <template> <svg :class="svgClass" aria-hidden="true" @click="svgClick"> <use :xlink:href="iconName"></use> </svg> </template> import {computed} from "vue"; const emit = defineEmits(['click']) const props = defineProps({ iconClass: { ...