Vue项目中使用Svg矢量图标

#Vue项目中使用Svg矢量图标

使用npm install svg-sprite-loader –save命令或 cnpm install svg-sprite-loader –save命令进行安装下载
在components目录下新建一个SvgIcon.veu组件，代码如下图

<template><svg :class="svgClass" aria-hidden="true"><use :xlink:href="iconName" /></svg>
</template><script>
/*** 使用栗子*   <svg-icon icon-class="set"></svg-icon>*/
export default {name: "SvgIcon",props: {iconClass: {type: String,required: true},className: {type: String,default: ""}},computed: {iconName() {return `#icon-${this.iconClass}`;},svgClass() {if (this.className) {return "svg-icon " + this.className;} else {return "svg-icon";}}}
};
</script><style scoped>
.svg-icon {width: 16px;height: 16px;vertical-align: -0.15em;fill: currentColor;overflow: hidden;margin-right: 10px;
}
</style>

然后需要新建icons目录，与components目录同级
## icons / index.js代码如下

import Vue from "vue";
import SvgIcon from "@/components/SvgIcon"; // svg组件
// 注册全局组件
Vue.component("svg-icon", SvgIcon);
const requireAll = reqireContext => reqireContext.keys().map(reqireContext);
const req = require.context("./svg", false, /\.svg$/);
requireAll(req);

需要在main.js中进行引用 icons/index.js

我使用的是vue-cli3以上版本，所以在项目中新建vue.config.js，进行配置svg组件（我刚开始没有在vue.config.js中配置，使用svg时，页面没有生效）

 chainWebpack: config => {// set svg-sprite-loaderconfig.module.rule('svg').exclude.add(resolve('src/icons')).end()config.module.rule('icons').test(/\.svg$/).include.add(resolve('src/icons')).end().use('svg-sprite-loader').loader('svg-sprite-loader').options({symbolId: 'icon-[name]'}).end()

最后，在页面进行使用svg图标，这样就完全配置好了

<svg-icon icon-class=" "></svg-icon>

Vue项目中使用Svg矢量图标相关推荐

vue项目中使用阿里矢量图标库
1.下载图标代码在本地 2.将一下文件放在一个文件夹比如icon文件夹下,将icon放在assets文件夹下,如图 3.在main.js中导入 import './assets/icon/iconfo ...
vue框架项目中使用阿里矢量图标库
vue框架项目中使用阿里矢量图标库一.打开阿里矢量图标,将需要图标加入购物车,选择下载代码二.解压缩包,将解压缩后的文件夹放入项目文件夹下的src/assets 1.在main.js中引入css ...
学习踩坑：在Vue项目中使用svg标签却无法改变图标的颜色
在Vue项目中使用svg标签却无法改变图标的颜色在学习 vue 实战项目的过程中,用到了 svg 模块,对其使用了 fill 属性后,图标的颜色却没有任何的改变,反复查看了视频,步骤是一模一样的,却 ...
Vue项目中操作svg文件
Vue项目中使用svg 引入依赖 yarn add svg-sprite-loader -D [可选] yarn add svgo svgo-loader -D 依赖说明: svg-sprite-lo ...
在 Quasar cli 搭建的 vue 项目中引用阿里字体图标 iconfont symbol方式
在 Quasar cli 搭建的 vue 项目中引用阿里字体图标 iconfont 1. symbol 方式 2. font class 方式(未实践) 1. symbol 方式首先说明一下,这 ...
vue项目中使用阿里iconfont图标(下载并在本地引用)
vue项目中使用阿里iconfont图标(下载并在本地引用) step1 step2 step3 在scr/asstets/css目录下新建icons文件夹,把图中所需要的四个文件放进去即可记得在m ...
在vue项目中使用svg图标
目录 VUE项目中为什么使用svg 1.在src/components下创建文件夹,命名为SvgIcon,并再SvgIcon文件夹下,新增目录index.vue文件: 2.在src目录下,新增文件夹, ...
vue项目中如何设置ico图标
在vue项目开发中往往会设计到浏览器头部图标的设置,这里分享一下自己在项目中的使用的方法,如有不足的地方还望指正,直奔主题: 1.首先如何制作ico图标,本人使用的是比特虫在线制作ico图标,使用方法 ...
vue项目中使用阿里巴巴矢量图库图标的操作步骤
1)网站 https://www.iconfont.cn/ 找个账号登录,收藏一些自己想要的图标. 2)开始新建项目,项目名称任意 ,记住fontClass/ symbot 前缀. 3)把收藏的图标放 ...

Vue项目中使用Svg矢量图标

Vue项目中使用Svg矢量图标相关推荐

最新文章

热门文章