vue安装svg 依赖包,配置全局svg组件

朱雀 2023-02-17 02:56 338阅读 0赞

## 1，终端安装 npm ##

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

## 2，自定义组件 ##

![20200611160048821.png][]

在src下创建一个icons文件夹，创建一个index.js页面和 svgIcons.vue页面，再创建一个svg的文件夹用来存放我们要用到的svg图片。

svgIcons.vue页面：

<template>
      <svg :class="svgClass" aria-hidden="true">
        <use :xlink:href="iconName"></use>
      </svg>
    </template>
    <script>
    export default {
      name: 'svg-icon',
      props: {
        iconClass: {
          type: String,
          required: true
        },
        className: {
          type: String
        }
      },
      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: 1.2em;
      height: 1.2em;
      vertical-align: -0.18em;
      fill: currentColor;
      overflow: hidden;
    }
    </style>

index.js页面：

import Vue from 'vue'
    import SvgIcon from './svgIcon.vue' // svg组件
    
    // register globally 全局注册
    Vue.component('svg-icon', SvgIcon)
    
    const requireAll = requireContext => requireContext.keys().map(requireContext)
    
    const req = require.context('./svg', false, /\.svg$/)
    // （创建了）一个包含了 svg 文件夹（不包含子目录）下面的、所有文件名以 `.suv` 结尾的、能被 require 请求到的文件的上下文。
    // 这个是webpack提供的require方法，可以创建上下文环境。相当于将svg目录下的svg文件require进来。
    requireAll(req)

### 3，在main.js引入 ###

![20200611160737552.png][]

### 4，配置svg环境  ###

在我们的vue.config.js文件配置：

配置路径：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70][]

configureWebpack: (config) => { // webpack配置，值位对象时会合并配置，为方法时会改写配置
      
        Object.assign(config, { // 开发生产共同配置
          resolve: {
            alias: {
              'vue':'vue/dist/vue.js',
              '@': path.resolve(__dirname, './src'), //设置路径别名
               '@c':path.resolve(__dirname, './src/components')
            }
          }
        })
      },

配置svg 环境：

chainWebpack: config => {
        //一个规则里的 基础Loader
        // svg是个基础loader
        const svgRule = config.module.rule('svg')
    
        // 清除已有的所有 loader。
        // 如果你不这样做，接下来的 loader 会附加在该规则现有的 loader 之后。
        svgRule.uses.clear()
    
        // 添加要替换的 loader
        svgRule
          .use('svg-sprite-loader')
          .loader('svg-sprite-loader')
          .options({
            symbolId: 'icon-[name]'
          })
      },

这里要注意了，只要修改了我们的vue.config.js文件都得重启项目。

### 5，调用 ###

1）先在我们的Iconfont阿里巴巴矢量图标库里面添加至你的项目，然后下载

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70 1][]

选择svg下载

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70 2][]

复制到你的项目中去，修改相应的名称 。

需要注意的是我们最好在设置svg图片名称时最好是语义话，便于我们理解和使用。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70 3][]

2）在页面中直接使用，只要把我们需要用到的svg图片的名称填上：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70 4][]

效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70 5][]

所以，只要我们配置好全局svg组件,我们需要那个图标，只需要改变iconClass和 className参数对应到相应的svg图片名称即可。

[20200611160048821.png]: https://img-blog.csdnimg.cn/20200611160048821.png
[20200611160737552.png]: https://img-blog.csdnimg.cn/20200611160737552.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200611161243319.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200611162928685.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200611163016525.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200611163117588.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200611165138568.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200611165318786.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW,size_16,color_FFFFFF,t_70