svg-icon的使用（将svg转换为icon来使用）

一、安装svg-sprite-loader

npm install svg-sprite-loader --save

二、vue.config.js配置

chainWebpack: (config) => {// set svg-sprite-loaderconfig.module.rules.delete('svg'); // 重点:删除默认配置中处理svgconfig.module.rule('svg-sprite-loader').test(/\.svg$/).include.add(resolve('src/icons')) // 处理svg目录.end().use('svg-sprite-loader').loader('svg-sprite-loader').options({symbolId: 'icon-[name]',});}

三、新建SvgIcon组件（例如src/components/SvgIcon/index.vue）

<template><svg :class="svgClass" aria-hidden="true" v-on="$listeners"><use :xlink:href="iconName" /></svg>
</template><script>
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: 1em;height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;
}
</style>

四、src新建icons文件夹，其下再新建index.js和svg文件夹（用于存放svg文件）

index.js文件代码如下

import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'// svg component// register globally
Vue.component('svg-icon', SvgIcon)const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)

五、main.js里引入

六、使用

// 例如要显示eye.svg,写法如下。style和class都可以正常使用哦，改变svg的大小和icon用法一样，使用font-size。
<svg-icon icon-class="eye"></svg-icon>

svg-icon的使用（将svg转换为icon来使用）相关推荐

将图片转换成svg文件，自定义icon小图标，svg速成
将图片转换成svg文件,自定义icon小图标,svg速成一.svg是什么? 二.操作步骤 1.进入网站 2.将svg复制 3.引用svg文件总结一.svg是什么? SVG是一种图像文件格式,它的 ...
将图片转换为Icon
下面是简单的将图片转换为Icon的方法,不过只支持16bit的颜色 Bitmap bm; Stream strm = this.GetType().Assembly.GetManifestReso ...
openlayers加载svg,如何在OpenLayers-3中将SVG图像用作地图标记？
I am trying to create map "pin-drops" (ie. map markers) in OpenLayers-3 (OL3) using SVG im ...
苹果系统使用svg 动画_为什么要使用SVG图像：如何为SVG设置动画并使其快速闪电化
苹果系统使用svg 动画我们为什么要使用SVG? (Why Are We Using SVG?) The web development sector is growing at a rapid p ...
svg添加html控件,SVG中嵌入HTML元素
.clsfont{ border:1px solid #ccc;background:#fff;line-height:37px;color:#999;font-size:14px;text-alig ...
css icon设置,CSS之字体图标 icon 的多种实现
什么是icon?让我们先来看一个例子: 我们以简书为例子,图中看到的用圆圈起来的部分都是icon 这个时候你就想问了,这不就是几张图片么? 不,它不是图片,而是文字什么??这怎么可能是文字,文字怎么 ...
css svg什么意思,CSS之SVG
一.学习链接二.简介 [0]SVG 效果预览 image [1]SVG 的预定义形状矩形圆形椭圆线折线多边形路径 [2]SVG 的通用标准语法 width:宽度: height:高度: ...
html svg 颜色,通过css改变svg img的颜色
需求如下图,hover的时候改变图标颜色,图标为引入的svg img 一般的解决办法有:1.字体图标改变css的color属性:2.js在hover事件中切换图片:3.老一点的方案是hover切换背景 ...
svg glyph替代_使用SVG替代Imagemaps
svg glyph替代 To create a clickable map on a website – for example, to create a world map for an compa ...
深入理解 SVG 系列（一） —— SVG 基础
来源:https://segmentfault.com/a/1190000015652209 本系列文章分为三个部分: 第一部分是 SVG 基础. 主要讲 SVG 的一些基础知识,包括 SVG 基本元 ...

svg-icon的使用（将svg转换为icon来使用）

一、安装svg-sprite-loader

二、vue.config.js配置

三、新建SvgIcon组件（例如src/components/SvgIcon/index.vue）

四、src新建icons文件夹，其下再新建index.js和svg文件夹（用于存放svg文件）

index.js文件代码如下

五、main.js里引入

六、使用

svg-icon的使用（将svg转换为icon来使用）相关推荐

最新文章

热门文章