Vue 引入 svg 图标 hover效果实现

在项目中经常会用到svg图标，伴随着hover效果这样的需求，百度上一大堆人都在说修改fill属性就能实现，但结果都是毫无效果。来看看我是怎么修改的。本教程含如何在vue中引入svg和修改svg颜色，如果想直接看如何修改svg颜色请看最下边。

首先在vue中引入svg图标

vue中引入svg图标

// index.js
import Vue from "vue";
import WbIcon from "@/components/icon/WbIcon.vue"; // svg component

/* register globally */
Vue.component("wb-icon", WbIcon);

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

// @/components/icon/WbIcon.vue

然后在mian.js 注册

import Vue from "vue";
import "@/assets/icons"; // svg 存放在这个目录下。

new Vue({
    router,
    render: h => h(App)
}).$mount("#app");

组件中使用

svg组成

svg 颜色绘制通常都是用fill来实现。

svg样例

修改

看上边的fill属性是个none，这样修改是方便咱们前端后期通过color来修改。注意哦，这个只适用于单色svg图标。后边的fill属性都要修改为fill=currentColor。一定是都要才会有效果哦！

css

.icon:hover {
  color: "#f20"
}

svg颜色才会随着css color 一起修改哦