前端Vue项目中使用SVG图标详解案例(带源码)

SVG是什么

SVG，指可缩放矢量图形（Scalable Vector Graphics），是用于描述二维矢量图形的一种图形格式，是由万维网联盟制定的开放标准。SVG 使用 XML 格式来定义图形，除了 IE8 之前的版本外，绝大部分浏览器都支持 SVG，可将 SVG 文本直接嵌入 HTML 中显示。

SVG优势

• SVG 可被非常多的工具读取和修改（比如记事本）
• SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。
• SVG 是可伸缩的
• SVG 图像可在任何的分辨率下被高质量地打印
• SVG 可在图像质量不下降的情况下被放大
• SVG 图像中的文本是可选的，同时也是可搜索的（很适合制作地图）
• SVG 可以与 Java 技术一起运行
• SVG 是开放的标准
• SVG 文件是纯粹的 XML
• SVG 绘制的是矢量图，因此对图像进行放大不会失真。
• 基于 XML，可以为每个元素添加 JavaScript 事件处理器。
• 每个图形均视为对象，更改对象的属性，图形也会改变。
• 不适合游戏应用。

SVG下载

iconfont官网

进入官网,自行注册账号,如果有就更好

iconfont官网

SVG下载

步骤一

选择自己需要的图标,比如下面

步骤二

下载下来即可,一会放入项目当中

vue项目中使用

插件下载

npm install svg-sprite-loader -save

svgIcon组件创建

步骤一

创建目录如下，components => SvgIcon => svgIcon.vue

步骤二

(1)注意使用

<use xlink:href="#icon-XXX"></use>  
XXX代表下载好的svg名称,我下载修改后是water,修改之后就是<use xlink:href="#icon-water"></use> 
文件名字如下图

(2)注意样式

注意样式：想要修改svg的颜色,必须到svg源文件里面path将fill和stroke的值改成currentColor以后,如果有想要的样式颜色也可以不用修改,然后就可以通过赋值class,修改class的color属性就生效了,修改如下图

源码如下

<template>
  <div class="svgIcon">
    svgIcon页
    <svg aria-hidden="true" class="svgClass">
      <!-- <use :xlink:href="iconName" /> -->
      <use xlink:href="#icon-water"></use>
    </svg>
  </div>
</template>

<style scoped>
.svgClass {
  color: pink;
}
.svgClass:hover {
  color: #409eff;
}
</style>

icons创建

步骤一

所需要创建的目录如下

步骤二

在iconfont官网下载的water.svg放入对应的文件

步骤三

index.js源码如下

import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon/svgIcon'// svg组件

// register globally
Vue.component('svg-icon', SvgIcon)

const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)

步骤四

(1)

全局挂载icons,在main.js里面
目录如下图

(2)

所需要引入的代码如下 import './icons'

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

import './icons' // 这个代表全局挂载项目当中,所有组件都可以使用icons

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

vue.config.js配置

步骤一

在项目根目录创建vue.config.js,如下图

步骤二

内容如下

const path = require('path')

function resolve(dir) {
  return path.join(__dirname, dir)
}

module.exports = {

  chainWebpack: config => {

    config.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()
  }
}

效果如下图

gitHub源码

gitHub项目地址

gitHub克隆地址:

https://github.com/shuanglei666/Vue-SVG.git

最后

感觉文章好的话记得点个心心和关注和收藏，有错的地方麻烦指正一下，如果需要转载,请标明出处，多谢！！！