Vue3 + Vite + TS项目引入iconfont图标（Svg方式）指南

2024-01-21 19:52:16

在当今丰富多彩的项目开发世界中，图标扮演着不可或缺的角色。无论是UI设计还是用户交互，图标都可以显著提升用户体验。在 Vue3 + Vite + TS 项目中，通过 SVG（可缩放矢量图形）方式引入iconfont图标，已经成为一种广泛采用的方法。不仅因为它易于使用，还因为它支持多种平台和设备，并具有优异的可缩放性和跨平台一致性。

在这篇全面且细致的指南中，我们将携手并进，一步一步地了解在 Vue3 + Vite + TS 项目中引入iconfont图标所涉及的方方面面。从选择合适的图标到实现 SVG 的本地化，您将领略到整个过程的奥秘，并获得解决实际问题的实用技能。

SVG 简介

在正式开始之前，让我们简要回顾一下 SVG 的基本概念和优势。SVG 作为一种基于 XML 的图形格式，以其可扩展性、清晰度和灵活性而著称。SVG 图形可以不受尺寸限制地缩放，而不会损失质量，因此非常适合在各种设备上显示。此外，SVG 支持多种颜色模式、渐变和动画效果，可充分满足不同场景下的设计需求。

选择合适的图标

在引入手之前，首先需要选择合适的图标。iconfont 是一个提供海量矢量图标的平台，其图标种类繁多，风格各异，并且允许在线编辑和下载。您可以在 iconfont 上根据自己的项目风格和需求，选择合适的图标，并下载 SVG 格式的文件。

导入 SVG 图标

将下载的 SVG 图标放入项目的 assets 文件夹中，并确保在项目中引用该文件夹。然后，您可以通过以下两种方式将 SVG 图标引入您的 Vue 组件中：

直接导入：

<template>
  <svg>
    <use xlink:href="assets/icon.svg#icon-name"></use>
  </svg>
</template>

<script>
import icon from 'assets/icon.svg';
export default {
  components: {
    icon
  }
};
</script>

通过组件注册：

// Icon.vue

<template>
  <svg>
    <use xlink:href="#icon-name"></use>
  </svg>
</template>

<script>
export default {
  name: 'Icon',
  props: {
    name: {
      type: String,
      required: true
    }
  }
};
</script>

// main.js

import Icon from './components/Icon.vue';

Vue.component('icon', Icon);