Icon 图标不够用？开发属于自己的 Icon 组件

一个网站 icon 图标是必不可少的，ui 组件库的 icon 又不是很理想，在 iconfont 上找又颇为麻烦还不够灵活，今天就带你来实现自己的 icon 组件，例子都是借助 iconfont 的 svg。你也可以用自己的 svg。

前期准备

• iconfont 网站 官网
• 创建自己的 Icon 组件

代码展示

<template>
    <svg t="1655098363258" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2125" :width="size" :height="size"><path d="M675.328 117.717333A425.429333 425.429333 0 0 0 512 85.333333C276.352 85.333333 85.333333 276.352 85.333333 512s191.018667 426.666667 426.666667 426.666667 426.666667-191.018667 426.666667-426.666667c0-56.746667-11.093333-112-32.384-163.328a21.333333 21.333333 0 0 0-39.402667 16.341333A382.762667 382.762667 0 0 1 896 512c0 212.074667-171.925333 384-384 384S128 724.074667 128 512 299.925333 128 512 128c51.114667 0 100.8 9.984 146.986667 29.12a21.333333 21.333333 0 0 0 16.341333-39.402667zM456.704 305.92C432.704 289.152 405.333333 303.082667 405.333333 331.797333v360.533334c0 28.586667 27.541333 42.538667 51.370667 25.856l252.352-176.768c21.76-15.253333 21.632-43.541333 0-58.709334l-252.373333-176.768z m-8.597333 366.72V351.466667l229.269333 160.597333-229.269333 160.597333z" :fill="color"  p-id="2126"></path></svg>
</template>

<script>
export default {
    props: {
        color: {
            type: String,
            default: '#FFF'
        },
        size: {
            type: String || Number,
            default: 20
        },
        hoverColor: {
            type: String,
            default: 'orange'
        }
    },
}
</script>

<style scoped>
/* svg {
    cursor: pointer;
} */
svg:hover > path { fill: v-bind(hoverColor) !important }
</style>

说明

代码中的svg可以替换成自己需要的，这个 color 是变量，父组件传值过来的 记得替换掉

需要传入的值

• color [ String ] 字符串类型 用于定义 icon 图标的颜色
• size [ Number || String ] 数字和字符串都可以，用于设置icon图标的大小
• hoverColor [ String ] 字符串类型 用于定义 icon 图标 hover 的颜色

总结

很简单的一个组件，比起从 iconfont 下载图片更加方便，相对于直接使用 svg 也更加好管理。这里默认是有 hover 样式的，可以通过加一个字段来设置hover是否可以使用，后期也出分享我自己开发的一些icon组件。