Vue 自定义icon组件封装SVG图标

通过自定义子组件CustomIcon.vue使用SVG图标，相比iconfont下载文件、重新替换更节省时间。

子组件包括：

Icons.vue 存放所有SVG图标的path
CustomIcon.vue 通过icon的id索引对应的图标

使用的时候需要将 <Icons></Icons> 引到使用的页面里面，图标才能展现。

javascript 复制代码

<template>
    <div style="margin: 200px;">
        <Icons></Icons>
        <div style="display: flex; align-items: center;">
            <CustomIcon style="margin-right: 4px; font-size: 24px;" icon="metro"></CustomIcon>
            <span>test</span>
        </div>
    </div>
</template>

<script>
// 路径结构参考这里
import CustomIcon from "./components/CustomIcon";
import Icons from './components/Icons';

export default {
    components: { CustomIcon, Icons }    
}
</script>

【Icons.vue】

javascript 复制代码

<template>
    <svg aria-hidden="true" style="position: absolute; width: 0px; height: 0px; overflow: hidden;">     
        <symbol id="icon-metro" viewBox="0 0 1024 1024">
            <path d="M658.98 671.11c-32.77 0-59.43-26.66-59.43-59.43s26.66-59.43 59.43-59.43 59.43 26.66 59.43 59.43-26.66 59.43-59.43 59.43z m0-83.86c-13.47 0-24.43 10.96-24.43 24.43s10.96 24.43 24.43 24.43 24.43-10.96 24.43-24.43-10.96-24.43-24.43-24.43zM379.48 671.11c-32.77 0-59.43-26.66-59.43-59.43s26.66-59.43 59.43-59.43 59.43 26.66 59.43 59.43-26.66 59.43-59.43 59.43z m0-83.86c-13.47 0-24.43 10.96-24.43 24.43s10.96 24.43 24.43 24.43 24.43-10.96 24.43-24.43-10.96-24.43-24.43-24.43zM216.47 903.75c-3.61 0-7.24-1.11-10.37-3.41-7.78-5.73-9.44-16.69-3.7-24.47l73.16-99.25c5.73-7.78 16.69-9.44 24.47-3.7 7.78 5.73 9.44 16.69 3.7 24.47l-73.16 99.25a17.488 17.488 0 0 1-14.1 7.12zM821.76 903.75c-5.37 0-10.67-2.46-14.1-7.12l-73.16-99.25c-5.73-7.78-4.08-18.74 3.7-24.47 7.78-5.74 18.74-4.08 24.47 3.7l73.16 99.25c5.73 7.78 4.08 18.74-3.7 24.47-3.13 2.3-6.76 3.41-10.37 3.41z" p-id="918"></path><path d="M773 858.62H252.7c-9.67 0-17.5-7.83-17.5-17.5s7.83-17.5 17.5-17.5H773c9.67 0 17.5 7.83 17.5 17.5s-7.83 17.5-17.5 17.5zM734.75 743.34h-431.5c-30.74 0-55.75-25.01-55.75-55.75V384.07c0-106.09 86.31-192.4 192.4-192.4h158.19c106.09 0 192.4 86.31 192.4 192.4v303.52c0 30.74-25.01 55.75-55.75 55.75zM439.9 226.66c-86.79 0-157.4 70.61-157.4 157.4v303.52c0 11.44 9.31 20.75 20.75 20.75h431.5c11.44 0 20.75-9.31 20.75-20.75V384.07c0-86.79-70.61-157.4-157.4-157.4H439.91z" p-id="919"></path><path d="M605.55 475h-173.1c-39.12 0-70.95-31.83-70.95-70.95V315c0-9.66 7.83-17.5 17.5-17.5s17.5 7.84 17.5 17.5v89.05c0 19.82 16.13 35.95 35.95 35.95h173.1c19.82 0 35.95-16.13 35.95-35.95V315c0-9.66 7.83-17.5 17.5-17.5s17.5 7.84 17.5 17.5v89.05c0 39.12-31.83 70.95-70.95 70.95zM573 159H465.5c-9.67 0-17.5-7.84-17.5-17.5s7.83-17.5 17.5-17.5H573c9.67 0 17.5 7.84 17.5 17.5S582.67 159 573 159z" p-id="920"></path>
        </symbol>
        <symbol id="icon-trophy" viewBox="0 0 1024 1024">
            <path d="M38.04 518.35a475.12 487.33 0 1 0 950.24 0 475.12 487.33 0 1 0-950.24 0Z" fill="#07AA74" p-id="1052"></path><path d="M513.16 18.75C258.74 18.75 52.5 224.99 52.5 479.41s206.25 460.66 460.66 460.66 460.66-206.25 460.66-460.66S767.58 18.75 513.16 18.75z m0 769.72c-170.69 0-309.06-138.37-309.06-309.06s138.37-309.06 309.06-309.06 309.06 138.37 309.06 309.06-138.37 309.06-309.06 309.06z" fill="#56D8B0" p-id="1053"></path><path d="M554.89 533.04c30.6 0 56.7-19.22 66.91-46.24h7.46c39.52 0 71.68-32.15 71.68-71.69 0-39.52-32.15-71.68-71.68-71.68h-2.87v-5.68c0-26.81-21.72-48.53-48.52-48.53H448.46c-26.8 0-48.53 21.72-48.53 48.53v5.68h-2.86c-39.52 0-71.68 32.15-71.68 71.68 0 39.53 32.15 71.69 71.68 71.69h7.46c10.2 27.02 36.31 46.24 66.91 46.24h4.6v45.74l-66.26 38.49-0.7 0.4c-0.05 0.03-0.09 0.06-0.14 0.08-0.22 0.13-0.45 0.26-0.66 0.41-0.57 0.35-1.12 0.72-1.66 1.12-0.17 0.11-0.32 0.23-0.48 0.35-0.86 0.66-1.67 1.36-2.44 2.12-0.16 0.14-0.31 0.3-0.46 0.45-0.21 0.21-0.44 0.45-0.65 0.68-0.19 0.2-0.37 0.42-0.56 0.63l-0.04 0.04c-0.58 0.68-1.14 1.39-1.66 2.12-0.18 0.25-0.34 0.49-0.51 0.74a27.898 27.898 0 0 0-3.63 22.57c1.12 4.18 3.16 7.92 5.86 11.02 0.24 0.28 0.49 0.56 0.75 0.83 0 0 0.01 0.01 0.01 0.02 0.26 0.27 0.51 0.53 0.78 0.79s0.54 0.52 0.82 0.77c1.11 0.99 2.3 1.9 3.54 2.72 1.26 0.81 2.58 1.52 3.95 2.13 1.02 0.45 2.08 0.84 3.16 1.16 0.06 0.01 0.1 0.03 0.15 0.05 0.32 0.09 0.65 0.18 0.97 0.26 0.73 0.19 1.48 0.34 2.23 0.47h0.03c0.37 0.06 0.75 0.12 1.13 0.17 0.38 0.06 0.76 0.09 1.15 0.12 0.37 0.04 0.73 0.06 1.1 0.07 0.41 0.02 0.83 0.03 1.23 0.03h180.17c0.41 0 0.83-0.01 1.23-0.03 0.37-0.02 0.74-0.04 1.1-0.07 0.39-0.03 0.78-0.06 1.16-0.12 0.37-0.05 0.75-0.1 1.12-0.17 0.02 0 0.05 0 0.07-0.01 0.73-0.12 1.47-0.28 2.18-0.46 0.32-0.07 0.62-0.16 0.93-0.25l0.21-0.06c0.34-0.11 0.7-0.22 1.04-0.34 0.71-0.24 1.41-0.52 2.1-0.82 1.38-0.6 2.7-1.32 3.95-2.13 1.25-0.82 2.44-1.73 3.55-2.72 0.27-0.25 0.55-0.51 0.82-0.77 0.26-0.26 0.53-0.53 0.78-0.8 0.26-0.28 0.51-0.56 0.76-0.84 2.7-3.11 4.74-6.85 5.86-11.02 2.21-8.19 0.52-16.7-4.14-23.32a30.215 30.215 0 0 0-2.26-2.81c-0.21-0.22-0.42-0.45-0.64-0.67-0.14-0.15-0.29-0.3-0.45-0.44-0.34-0.33-0.7-0.66-1.06-0.97-0.4-0.35-0.82-0.7-1.24-1.03-0.24-0.19-0.49-0.37-0.74-0.56-0.34-0.25-0.71-0.49-1.07-0.73-0.23-0.16-0.46-0.31-0.71-0.45-0.19-0.11-0.39-0.23-0.58-0.34l-0.69-0.4-66.27-38.47v-45.76h4.66z m71.5-133.92h2.87c8.67 0 16 7.33 16 16 0 8.68-7.33 16.01-16 16.01h-2.87v-32.01z m-226.46 32h-2.86c-8.68 0-16-7.33-16-16.01 0-8.67 7.32-16 16-16h2.86v32.01z" fill="#FFFFFF" p-id="1054"></path>
        </symbol>
    </svg>
</template>

【CustomIcon.vue】

javascript 复制代码

<template>
    <svg width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
        <use :xlink:href="'#icon-'+icon"></use>
    </svg>
</template>

<script>
    export default{
        props:{
            icon:String
        }
    }
</script>

【SVG图标来源参考】

iconfont-阿里巴巴矢量图标库