Vue项目使用svg图标实践

更新时间：2022年09月19日 09:39:34 作者：duyanke888

这篇文章主要介绍了Vue项目使用svg图标实践，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

一. svg图标介绍

svg图标是用作Web应用程序或移动应用程序内的图标或图像按钮。

图标使用svg的优点：

可以轻松地按比例放大和缩小图标，具体取决于要在应用程序中显示的位置以及显示应用程序的屏幕尺寸。
svg图标具有优于位图图形的优点，即按比例放大或缩小时它们仍然看起来不错。
位图图形在按比例放大时趋于像素化，而在按比例缩小时会失去质量（像素）。

这里只讨论svg的特点，不对svg图标的文件结构进行介绍。

二. svg图标的获取方式

漂亮和精致的图标ICON可以为整个UI界面加分不少，下面提供四个常用的免费SVG下载地址，提供给大家使用，基本可以满足绝大部分的使用需求。

这里推荐国内Iconfont-阿里巴巴矢量图标库

地址：https://www.iconfont.cn/

介绍：阿里巴巴体验团队倾力打造，功能很强大且图标内容很丰富的矢量图标库，提供矢量图标下载、在线存储、格式转换等功能。

三. Vue项目使用svg图标的环境配置

安装依赖

npm install --save-dev svg-sprite-loader

四. Vue项目使用svg图标的项目配置

1.新建icon文件夹放置icon图标，并在此文件夹中新建svg文件夹放置svg文件，文件名尽量不要用中文。

2.svg依赖的配置

2.1 Vue 2.x的配置

在webpack.base.conf.js中配置允许svg依赖如下：

 module: {
    rules: [
      {
        test: /\.svg$/,
        loader: 'svg-sprite-loader',
        include: [resolve('src/assets/icons')],
        options: {
          symbolId: 'icon-[name]'
        }
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        exclude: [resolve('src/assets/icons')],
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      }
    ]
  },

2.2 Vue 3.x的配置

在根目录新建vue.config.js文件中配置如下：

module.exports = {
  chainWebpack: config => {
    // svg rule loader
    const svgRule = config.module.rule('svg') // 找到svg-loader
    svgRule.uses.clear() // 清除已有的loader, 如果不这样做会添加在此loader之后
    svgRule.exclude.add(/node_modules/) // 正则匹配排除node_modules目录
    svgRule // 添加svg新的loader处理
      .test(/\.svg$/)
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]',
      })
    // 修改images loader 添加svg处理
    const imagesRule = config.module.rule('images')
    imagesRule.exclude.add(resolve('src/assets/icons'))
    config.module
      .rule('images')
      .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)
  }
}

2.3 Vue 4.x的配置

在根目录新建vue.config.js文件中配置如下：

const path = require('path')
module.exports = {
  /**
   * svg矢量图标使用配置
   * 使用svg-sprite-loader编译svg，如果使用file-loader时排除src/icons下的矢量图标
   * @param config
   */
  chainWebpack: (config) => {
    const svgRule = config.module.rule('svg')
    // 清除已有的所有 loader。
    // 如果你不这样做，接下来的 loader 会附加在该规则现有的 loader 之后。
    svgRule.uses.clear()
    svgRule
      .test(/\.svg$/)
      .include.add(path.resolve(__dirname, './src/icons'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]',
      })
    const fileRule = config.module.rule('file')
    fileRule.uses.clear()
    fileRule
      .test(/\.svg$/)
      .exclude.add(path.resolve(__dirname, './src/icons'))
      .end()
      .use('file-loader')
      .loader('file-loader')
  },
}

3.在icon文件夹中新建Svg.vue文件

<template>
  <svg :class="svgClass" aria-hidden="true">
    <use :xlink:href="iconName" rel="external nofollow"  />
  </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: 1rem;
  height: 1rem;
  vertical-align: -0.25em;
  fill: currentColor;
  overflow: hidden;
}
</style>

4.在icon文件夹中新建index.js文件

//下面这个是导入svgIcon/svg下的所有svg文件
const requireAll = (requireContext) => requireContext.keys().map(requireContext)
const req = require.context('./svg', false, /\.svg$/)
/*
 第一个参数是:'./svg' => 需要检索的目录，
 第二个参数是：false => 是否检索子目录,
 第三个参数是: /\.svg$/ => 匹配文件的正则
*/
requireAll(req)

5.在main.js文件中配置svg图标的相关设置

//svg图标的设置
import '@/assets/icon'
import svgIcon from '@/assets/icon/Svg.vue'
Vue.component('svg-icon', svgIcon)

6.使用svg组件

...
<svg-icon icon-class="left" className="icon"></svg-icon>
...

其中icon-class对应图标svg文件的名称；className对应图标的css样式属性，设置相关属性可以改变svg图标的样式。

注意

若svg图标的颜色并没有变化，可以选择打开svg文件，删除style标签里的每一项fill样式设置.

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Vue使用自定义指令实现页面底部加水印
本文主要实现给项目的整个背景加上自定义水印，可以改变水印的文案和字体颜色等，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-06-06
Vue+Vant实现7天日历展示并在切换日期时实时变换功能
本文介绍了如何利用Vue和Vant框架结合moment.js插件来实现一个7天日历展示功能,在这个功能中,用户可以在切换日期时看到界面的实时变化,此外,文章还提供了代码实现和效果测试的详细步骤,帮助开发者能够顺利完成类似的项目开发
2024-10-10
详解在Vue中通过自定义指令获取dom元素
本篇文章主要介绍了详解在Vue中通过自定义指令获取dom元素，具有一定的参考价值，有兴趣的可以了解一下。
2017-03-03
创建vue项目没有router、view的解决办法
在学习vue的时候遇到很多问题,这里做一些总结,下面这篇文章主要给大家介绍了关于创建vue项目没有router、view文件夹的解决办法,文中通过图文介绍的非常详细,需要的朋友可以参考下
2023-11-11
vue登录以及权限验证相关的实现
这篇文章主要介绍了vue登录以及权限验证相关的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-10-10
Vue实现电梯样式锚点导航效果流程详解
这篇文章主要介绍了Vue实现电梯样式锚点导航效果流程，这种导航效果广泛应用于商城点餐购物情景，文中通过示例代码介绍的很详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧
2023-05-05
关于对keep-alive的理解,使用场景以及存在的问题解读
这篇文章主要介绍了关于对keep-alive的理解,使用场景以及存在的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-05-05
Vue 让元素抖动/摆动起来的实现代码
这篇文章主要介绍了Vue 让元素抖动/摆动起来的实现代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-05-05
vue 路由子组件created和mounted不起作用的解决方法
今天小编就为大家分享一篇vue 路由子组件created和mounted不起作用的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-11-11
vue中清除定时器的方法实例详解
很多情况下,进入和退出vue界面,都没有清除定时器,从而导致有很多定时器一起工作,这样肯定是不行的,下面这篇文章主要给大家介绍了关于vue中清除定时器的方法,需要的朋友可以参考下
2023-02-02