VUE之使用svg图标

今天药忘吃喽~ 2023-07-20 13:49 12阅读 0赞

### 目录 ###

*  一 安装依赖
 *  二：配置webpack
 *   *  2.1 首先创建一个svg文件用来保存图标
     *  2.2 配置build文件夹中的webpack.base.conf.js
 *  三 配置svg组件
 *   *  3.1. 在src/components下新建文件夹及文件SvgIcon/index.vue
     *  3.2. index.vue内容
     *  3.2 注册svg组件
     *  3.3 引入注册文件到main.js
 *  四 使用方式

> 在使用矢量图标时，以往都是去网站下载png格式，或者添加unicode格式  
> 现在在vue中，我们以组件的形式加入，跟优雅的使用矢量图标  
> 先给一张效果图  
> ![在这里插入图片描述][20200402100238181.png]

# 一 安装依赖 #

在vue中首先需要安装可以加载svg的依赖

1.  npm  
    `npm install svg-sprite-loader --save-dev`
2.  yarn  
    `yarn add svg-sprite-loader ---dev`

> 如果 出现错误可以适当降低依赖版本

# 二：配置webpack #

## 2.1 首先创建一个svg文件用来保存图标 ##

![在这里插入图片描述][20200402101022238.png]

## 2.2 配置build文件夹中的webpack.base.conf.js ##

1.  在图片规则中加入`exclude: [resolve('src/assets/icons')]`  
    排除此文件中的svg图标  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lDSl94aXlhbmc_size_16_color_FFFFFF_t_70]

> 由于vue-cli默认情况下会使用 url-loader 对svg进行处理，会将它放在/img 目录下，所以这时候我们引入svg-sprite-loader 会引发一些冲突。我们可以使用exclude: \[resolve(‘src/assets/icons’)\]，让url-loader只处理除此文件夹之外的svg。

1.  加入加载svg规则
    
        { 
          test: /\.svg$/,
          loader: 'svg-sprite-loader',
          include: [resolve('src/assets/icons')],
          options: { 
            symbolId: 'icon-[name]'
          }
        },

# 三 配置svg组件 #

## 3.1. 在src/components下新建文件夹及文件SvgIcon/index.vue ##

![在这里插入图片描述][20200402102943554.png]

## 3.2. index.vue内容 ##

<template>
      <div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="$listeners" />
      <svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners">
        <use :href="iconName" />
      </svg>
    </template>
    
    <script>
    // 提示vue中驼峰命名会自动识别为icon-class格式
    // 使用方式
    // 
    export default { 
      name: 'SvgIcon',
      props: { 
        iconClass: { 
          type: String,
          required: true
        },
        className: { 
          type: String,
          default: ''
        }
      },
      computed: { 
        isExternal () {  // 检测是否是外链的形式引入 svg
          return /^(https?:|mailto:|tel:)/.test(this.iconClass)
        },
        iconName () { 
          return `#icon-${ this.iconClass}`
        },
        svgClass () { 
          if (this.className) { 
            return 'svg-icon ' + this.className
          } else { 
            return 'svg-icon'
          }
        },
        styleExternalIcon () { 
          return { 
            mask: `url(${ this.iconClass}) no-repeat 50% 50%`,
            '-webkit-mask': `url(${ this.iconClass}) no-repeat 50% 50%`
          }
        }
      }
    }
    </script>
    
    <style scoped>
    .svg-icon { 
      width: 1em;
      height: 1em;
      vertical-align: -0.15em;
      fill: currentColor; // 默认会读取其父级的 color 
      overflow: hidden;
    }
    
    .svg-external-icon { 
      background-color: currentColor; // 默认会读取其父级的 color 
      mask-size: cover!important;
      display: inline-block;
    }
    </style>

## 3.2 注册svg组件 ##

在svg同级目录下新建index.js文件  
![在这里插入图片描述][20200402104123435.png]

import Vue from 'vue'
    import SvgIcon from '@/components/SvgIcon'// svg component
    
    // register globally
    Vue.component('svg-icon', SvgIcon)
    // 使用webpack的require.context自动引入src/assets/icons/svg下面所有的图标
    const req = require.context('./svg', false, /\.svg$/)
    const requireAll = requireContext => requireContext.keys().map(requireContext)
    requireAll(req)

## 3.3 引入注册文件到main.js ##

全局使用

import './assets/icons' // icon

svg配置完成

# 四 使用方式 #

> 默认在 @/assets/icons 中注册到全局中，可以在项目中任意地方使用。所以图标均可在 @/assets/icons/svg。可自行添加或者删除图标，所以图标都会被自动导入，无需手动操作。

1.  使用
    
        !-- icon-class 为 icon 的名字; class-name 为 icon 自定义 class-->
        <svg-icon icon-class="password"  class-name='custom-class' />
2.  改变颜色
    
    > svg-icon 默认会读取其父级的 color fill: currentColor;  
    > 你可以改变父级的color或者直接改变fill的颜色即可。
3.  使用外链  
    支持使用外链的形式引入 svg。例如：
    
    > <svg-icon icon-class="https://xxxx.svg />
4.  大小  
    这里图标默认使用的都是 128\*128 大小规格的，可自行根据情况修改  
    但大小最后统一  
    最后附图  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lDSl94aXlhbmc_size_16_color_FFFFFF_t_70 1]

[20200402100238181.png]: /images/20230528/11fbf6bf035d4712859d7b3784de1b52.png
[20200402101022238.png]: /images/20230528/b7e1b5f6a4c14efcaf7633126f915571.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lDSl94aXlhbmc_size_16_color_FFFFFF_t_70]: /images/20230528/ca6bdd2b0ef74f2b86a410106d03731a.png
[20200402102943554.png]: /images/20230528/91463a0279a4446998e244a6b70737b7.png
[20200402104123435.png]: /images/20230528/925b8ee2ad044021ad15993b9d3ca972.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lDSl94aXlhbmc_size_16_color_FFFFFF_t_70 1]: /images/20230528/66fb51865d734a68a5773727ab571476.png