在Vue项目中更优雅的使用svg图标

大前端 html5 css3 vue

创建时间:2021-12-31 17:32

字数:856 阅读:

前言
一、放置svg文件
二、SvgIcon组件
三、配置组件
四、webpack配置
五、引入
六、使用

项目中的svg自定义图标可以在项目中构建字体图标，使用更为方便

前言

项目开发时我们会用到一些UI库，比如PC端常用的elementUI，移动端常用的vantUI、mintUI等。一般很多UI库都会有icon组件，也就是组件库提供的图标，但是往往这些图标并不能满足我们饥渴的设计师，就会有很多自定义的图标。那前端怎么使用呢？可能你会希望设计师切图，也就是png，当然可以实现，但是不够优雅，而且麻烦，如果同一个图标有不同的状态也就是不同的颜色还要UI设计师给多个文件，也会占用更多的空间。设计师给svg文件也是很常用的，而且svg文件可以更利于前端灵活使用，那么如何更加优雅的使用svg文件呢？本文带你来看看。

一、放置svg文件

|-- src
|   |-- components
|       |-- SvgIcon
|           |-- src
|               |-- index.vue
|           |-- icons
|               |-- up.svg
|               |-- svg文件2
|           |-- index.js

将设计师给到的svg文件放入icons文件夹中，注意文件命名不要有中文和其他特殊字符，后面会用到。找到外层有fill属性的g标签或者path标签将fill属性设置为”currentColor”，一般svg文件都会有多个嵌套的g标签或者path标签并且比较靠外层的会有个fill属性为这个svg文件的填充色值，如果没有的话就自己找到外层的添加上fill="currentColor"。

如下示例：

1
2
3

<svg >
	<path d="M507.1......" p-id="2033" fill="currentColor"></path>
</svg>

或：

<svg >
  <desc>Created with Sketch</desc>
	<g id="ola" stroke="none" fill="currentColor">
  	<g>
    	<path d="M6,0 L78...."></path>
    </g>
  </g>
</svg>

二、SvgIcon组件

书写SvgIcon组件代码：/src/components/SvgIcon/src/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 () {
      return `svg-icon ${this.className || ''}`
    }
  }
}
</script>
<style scoped>
  .svg-icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
  }
</style>

三、配置组件

在第一步中新建的index.js文件里


import Vue from 'vue'
import SvgIcon from './src'// svg组件

// 全局注册
Vue.component('SvgIcon', SvgIcon)
 
const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('./icons', false, /\.svg$/)
const iconMap = requireAll(req)

四、webpack配置

安装依赖包

1	npm i svg-sprite-loader

在vue.config.js中增加配置

const path = require('path')
module.exports = {
  chainWebpack: config => {
    config.module
    	.rule('svg')
    	.exclude.add(path.resolve('src/components/SvgIcon'))
    	.end();
   	config.module
    	.rule('icons')
    	.test(/\.svg$/)
    	.include.add(path.resolve('src/components/SvgIcon'))
    	.end()
    	.use('svg-sprite-loader')
    	.options({
      	symbolId: 'icon-[name]'
    	})
    	.end();
  }
}

五、引入

在main.js中引入配置好的组件

1	import '@/components/SvgIcon'

六、使用

<template>
	<div>
    <SvgIcon class="my-icon" icon-class="up" />
  </div>
</template>

<style>
  .my-class {
    font-size: 20px;
    color: #f00;
  }
</style>

icon-class属性值必须为对应svg文件的文件名。

class属性为自定义，如需设置图标大小或颜色，则可如上示例自定义class通过font-size属性修改大小，color属性修改图标颜色。

代码不是万能的，但不写代码是万万不能的

2021/12/31 Dary记

更多干货，尽在公众号

转载请注明来源，文末有原始链接。欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 dary1112@foxmail.com