Vue 图标组件：SVG 图标的完美替代品

2023-11-27 00:47:09

从图标字体迁移到 SVG 的原因

清晰度和可缩放性： SVG 图标在任何设备上都能保持清晰和锐利，无论屏幕分辨率如何。它们可以轻松缩放，而不会出现像素化或失真。
灵活性： SVG 图标可以轻松地使用 CSS 改变颜色、大小和其他属性。这使得它们非常适合创建动态和交互式图标。
易于使用： SVG 图标可以很容易地添加到 Vue.js 应用程序中。可以使用 v-html 指令或第三方库，如 Vue-SVG-Icon。

在 Vue.js 中使用 SVG 图标

在 Vue.js 中使用 SVG 图标有几种方法。最简单的方法是使用 v-html 指令。该指令允许您将 HTML 片段直接插入到模板中。以下是如何使用 v-html 指令添加 SVG 图标的示例：

<template>
  <div>
    <svg v-html="icon"></svg>
  </div>
</template>

<script>
export default {
  data() {
    return {
      icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2a1.2 1.2 0 0 1-1.2-1.2c0-.66.54-1.2 1.2-1.2s1.2.54 1.2 1.2a1.2 1.2 0 0 1-1.2 1.2z"/></svg>'
    }
  }
}
</script>

您还可以使用第三方库，如 Vue-SVG-Icon。该库提供了许多开箱即用的 SVG 图标，以及一个用于轻松添加和管理图标的 API。以下是如何使用 Vue-SVG-Icon 添加 SVG 图标的示例：

<template>
  <div>
    <svg-icon icon="home"></svg-icon>
  </div>
</template>

<script>
import { SvgIcon } from 'vue-svg-icon'

export default {
  components: {
    SvgIcon
  }
}
</script>