Joe's Blog

将 SVG 升级为 Vue 组件

2020-08-07

实际上这也并非新鲜玩意,但它能为工程带来部分便捷。

假设有一个 svg 文件 external-link-icon.svg

<svg
width="13px"
height="13px"
viewBox="0 0 13 13"
>

<g stroke="currentColor" stroke-width="0.8" fill="none" fill-rule="evenodd">
<path
d="M6.2 6.7l5-5.3M7.9.9h4m0 0v4m-2 2.5v2.5a2 2 0 0 1-2 2h-5a2 2 0 0 1-2-2v-5c0-1.1.9-2 2-2h2.5"
/>

</g>
</svg>

只需要将它更名为 external-link-icon.vue,并使用 <template> 包裹起来即可。

<template>
<svg
width="13px"
height="13px"
viewBox="0 0 13 13"
>

<g stroke="currentColor" stroke-width="0.8" fill="none" fill-rule="evenodd">
<path
d="M6.2 6.7l5-5.3M7.9.9h4m0 0v4m-2 2.5v2.5a2 2 0 0 1-2 2h-5a2 2 0 0 1-2-2v-5c0-1.1.9-2 2-2h2.5"
/>

</g>
</svg>
</template>

有何好处?

可以使用 Vue 组件的所有特性,如 props, attrs 等等。

<external-link-icon fill="magenta" />