踩矢量图的一些小坑

一、在index.js使用插件

import Vue from 'vue'

import SvgIcon from '@/components/SvgIcon'// svg component

// register globally

Vue.component('svg-icon', SvgIcon)

const req = require.context('./svg', false, /\.svg$/)

const requireAll = requireContext => requireContext.keys().map(requireContext)

requireAll(req)

二、svgIcon初始化

<template>

  <div

 :style="styleExternalIcon"

    class="svg-external-icon svg-icon"

    v-on="$listeners" />

  <svg  :class="svgClass" aria-hidden="true" v-on="$listeners">

    <use :href="iconName" />

  </svg>

</template>

3、使用svg组件

 <div class="split_container">

      <div

        class="split_line"

        v-for="(item, index) in borderType"

        :key="index"

        :class="datas.bordertp === item.type ? 'active' : ''"

        @click="switchSplit(item)"

      >

        <svg-icon

          :style="{

          'color': datas.auxliarColor,

        }"

          :icon-class="item.icon"

        ></svg-icon>

      </div>

1、想改变填充的颜色，找到对应的矢量图，清除style里的默认样式。

2、一定要看清楚需要传的是什么值，不要乱传，看子组件里面接受的是什么值

父组件：