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
<template>
    <svg class="wb-icon svg" aria-hidden="true" v-on="$listeners">
        <use :href="iconName" />
    </svg>
</template>

<script>
export default {
    name: "WbIcon",
    data() {
        return {};
    },
    props: {
        icon: {
            type: String,
            default: ""
        }
    },
    computed: {
        iconName() {
            return `#icon-${this.icon}`;
        }
    }
};
</script>

<style lang="scss" scoped>
.wb-icon.svg {
    width: 1em;
    height: 1em;
    fill: currentColor;
    overflow: hidden;
    vertical-align: middle;
}
</style>

然后在mian.js 注册

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

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

组件中使用

<wb-icon icon="portal-simulation-rain"></wb-icon>

svg组成

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

svg样例

<?xml version="1.0" encoding="UTF-8"?>
<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="编组-9">
            <rect id="矩形" fill="currentColor" opacity="0" x="0" y="0" width="18" height="18"></rect>
            <g id="删除" transform="translate(1.285714, 1.285714)" fill="currentColor" fill-rule="nonzero">
                <path d="M13.413643" id="形状"></path>
            </g>
        </g>
    </g>
</svg>

修改

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

css

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

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