vue项目如何创建svg组件，如何改变svg的颜色

2021-02-05 11:34:40 阅读：188 来源： 互联网

标签：vue svg loader 如何组件 config SvgIcon icon

一、组件创建

既然要创建svg组件，那么就需要项目支持svg引入

1、在vue.config.js中修改如下：

    // 清除已有的loader, 如果不这样做会添加在此loader之后
    config.module
      .rule('svg')
      .uses.clear()
      .end();
    // 则匹配排除node_modules目录
    config.module
      .rule('svg')
      .exclude.add(/node_modules/)
      .end();
    // 添加svg新的loader处理
    config.module
      .rule('svg')
      .test(/\.svg$/)
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]',
      })
      .end();

2、svg全局注册

import Vue from 'vue';
import SvgIcon from '@/components/svg-icon';

// 注册到全局
Vue.component('svg-icon', SvgIcon);

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

3、文件目录如下：

4、组件封装

<template>
  <svg :class="svgClass" aria-hidden="true">
    <use :xlink:href="iconName" />
  </svg>
</template>

<script>
export default {
  name: 'SvgIcon',

  props: {
    // 当前 svg 的文件名，如 arrow-left.svg，该值就应该是 arrow-left
    filename: {
      type: String,
      required: true,
    },

    // 自定义的 class，非必填
    className: {
      type: String,
      default: '',
    },
  },

  computed: {
    iconName() {
      return `#icon-${this.filename}`;
    },

    svgClass() {
      return 'svg-icon' + (this.className ? ' ' + this.className : '');
    },
  },
};
</script>

<style scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  fill: currentColor;
  overflow: hidden;
}
</style>

二、如果改变svg的颜色

将fill以及stroke的值改成currentColor以后，就可以通过赋值class，修改class的color属性就生效了

标签：vue,svg,loader,如何,组件,config,SvgIcon,icon
来源： https://www.cnblogs.com/zhangycun/p/14376773.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue项目如何创建svg组件，如何改变svg的颜色