将 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" />