PiLi_Note

Note

0%

Vue项目中使用svg图片，可修改大小颜色

发表于 更新于 分类于

Vue项目中使用svg小图标

安装svg-sprite-loader和配置vue.config.js

  1. 安装
    1
    npm install svg-sprite-loader -S
  2. 配置规则
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    //vue.config.js
    // 内置路径包
    const path = require("path");

    // 定义resolve方法，获取绝对路径
    function resolve(dir) {
      return path.join(__dirname, dir);
    }

    module.exports = {
      chainWebpack: config => {
        // 配置svg默认规则排除svg目录中svg文件处理
        config.module
          .rule("svg")
          .exclude.add(resolve("src/assets/svg"))
          .end();

        // 新增icons规则，设置svg-sprite-loader处理svg目录中svg文件
        config.module
          .rule("icons")
          .test(/\.svg$/)
          .include.add(resolve("src/assets/svg"))
          .end()
          .use("svg-sprite-loader")
          .loader("svg-sprite-loader")
          .options({ symbolId: "icon-[name]" })
          .end();
      },
    }

SvgIcon组件代码

  • 一般放在/src/components
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    <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: 1em;
        height: 1em;
        vertical-align: -0.15em;
        /* 此属性为更改svg颜色属性设置 */
        fill: currentColor;
        overflow: hidden;
    }
    </style>

注册SvgIcon为全局组件

  • 在/src/assets创建svg文件夹，里面放svg图片和一个index.js
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    //index.js
    import Vue from 'vue'
    import SvgIcon from '@/components/SvgIcon'

    // 全局注册组件
    Vue.component('svg-icon', SvgIcon)
    // 定义一个加载目录的函数
    const requireAll = requireContext => requireContext.keys().map(requireContext)
    const req = require.context('@/assets/svg', false, /\.svg$/)
    // 加载目录下的所有 svg 文件
    requireAll(req)

使用

  1. main.js引入
    1
    2
    // 引入svg
    import './assets/svg';
  2. 组件调用
    1
    2
    3
    //class-name:可设置颜色，大小；icon-class:svg图片的名字
    //如果颜色无效，需要将svg的fill的值设置为空“fill=""”
    <svg-icon class-name="quanbu" icon-class="quanbu"></svg-icon>
  3. 同时使用阿里的iconfont
  • 在项目设置里FontClass/Symbol 前缀不设置（因为默认值icon-），下载到本地放在/assets/iconfonts
    1
    2
    //main.js引入后，跟自己的svg图片一样使用
    import "./assets/iconfonts/iconfont.js";