vue3中把封装svg图标为全局组件

在vue3中我们使用svg图标是下面这样子的

    <svg style="width:30px;height:30px;"><use xlink:href="#icon-phone" fill="red"></use></svg>

第次使用图标都要写这么多重复的代码，很不方便，所以，如果我们把它封装成全局的组件， 就可以很方便的使用了
首先我们要看 svg 图标使用时 变化的部分有哪几个

所以我们新建一个组件 SvgIcon

SvgIcon.vue 的代码如下

<script setup lang="ts" name="SvgIcon">let props = defineProps({iconname: {type: String,default: '',},width: {type: [Number,String],default: 16,},height: {type: [Number,String],default: 16,},color:{type:String,default:'#666'}})
</script><template><div class="wrapper"><svg :style="{width:width+'px',height:height+'px'}"><use :xlink:href="`#icon-${iconname}`" :fill="color"/></svg></div>
</template><style scoped></style>

在页面中调用就可以了

---

以上是在单组件中调用， 每次使用 都要引入才可以使用，我们现在把它设置成全局组件，就不需要 每个调用的地方都要 import SvgIcon from “@/components/SvgIcon.vue”;

我们只需要在 main.ts中注册自定义的组件为全局组件就可以了