如何在 Vue 项目中优雅地使用图标

1. 字体图标与矢量图标

目前主要有两种图标类型：字体图标和矢量图标。

字体图标是在网页打开时，下载一整个图标库，通常可以通过特定标签例如 <i> 来使用，优点是方便地实现文字混排，缺点是包体积大，且难以自定义。

矢量图标本质是 <svg> 标签，包中只含有所需的图标，且很容易自定义，也可以选用不同图标库来源的图标，甚至可以用自定义 SVG，缺点是与文字混排相对复杂。

本文推荐并主要使用矢量图标。

2. 矢量图标源

目前比较全面的图标集：

Google Material Symbols (之前的 Google Icon)：比较现代化的图标集，包括圆角尖角图标集、空心实心图标集，主打交互图标，没有商标。
Material Design Icons：Material 风格的另一个图标集，大而全。
Iconfont：阿里的图标库，包括很多带颜色的特殊图标
Iconify：一个各种图标集的收集站，我们后文使用的包可以使用其中的所有图标集。

以上基本可以满足任何使用要求了。

3. 安装图标包及其剪枝策略

为了在 Vue 中便捷地使用图标，可以使用 iconify-prerendered 库，包含了所有 iconify 中图标集的图标的组件：

# 安装 Material Symbols 包
npm i @iconify-prerendered/vue-material-symbols

# 安装 Material Design Icons 包
npm i @iconify-prerendered/vue-mdi

当需要引入时，可以使用：

<script setup lang="ts">
import { IconWarningRounded } from '@iconify-prerendered/vue-material-symbols';
</script>

<template>
  <IconWarningRounded />
</template>

@iconify-prerendered/vue-material-symbols 的图标一般命名格式为：

Icon + 图标名 + 可选: Outline (空心) + 可选: Rounded (圆角)

同时，这里我们需要引入各个所需的图标，而不能使用通配符：

# 不能这样
import * from '@iconify-prerendered/vue-mdi';

这是因为我们的代码需要剪枝友好。剪枝是一种代码编译策略，毕竟不可能将包中所有的图标都发往客户端浏览器，所以编译为 js 包时，只会包含已经被 import 的图标，因此最大程度地减少了包体积。

注意：当 vite 运行在 dev 模式时，iconify-prerendered 会将整个图标包 (10M) 发送到浏览器，而不会剪枝，因此首次加载会很慢，请耐心等待。build 后会自动剪枝，不会再出现这种情况。

4. 图标与文字混排

由于我们使用的图标包本质上会将图标以 <svg> 标签的形式渲染，因此需要考虑混排的问题，一般用 flex 容器先包含两个元素，然后在 icon 上使用 my-auto 以实现：

<script setup lang="ts">
import { IconWarningRounded } from '@iconify-prerendered/vue-material-symbols';
</script>

<template>
  <div class="flex text-red-700 gap-2">
    <IconWarningRounded class="my-auto w-6 h-6" />
    <p class="text-lg font-semibold">Error!</p>
  </div>
</template>

5. 自定义 SVG 图标

自定义 SVG 图标一般需要关注：viewBox（代表定义的画布范围）、fill（颜色）两个属性：

<template>
  <svg viewBox="0 0 16 16" fill="currentColor">
    <path
      d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"
    />
  </svg>
</template>

这个 SVG 可以由 Adobe Illustrator 生成 (另存为 SVG)，略微修改即可做成 Vue 组件使用。

如果需要修改图标颜色，可以直接设置 color 属性：

<script setup lang="ts">
import { IconWarningRounded } from '@iconify-prerendered/vue-material-symbols';
</script>

<template>
  <IconWarningRounded class="text-red-500" />
</template>

如果需要分别设定各个路径，可以直接在 <path> 上进行修改，例如使用 fill 属性修改填充颜色：

<template>
  <svg viewBox="0 0 16 16">
    <path class="fill-slate-400 hover:fill-slate-300 transition-colors duration-300"
      d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"
    />
    <path class="fill-red-400 hover:fill-yellow-300 transition-colors duration-300"
      d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"
    />
  </svg>
</template>

6. 案例分析

上述方式已经使用在开源项目 GithubStar.Pro 中，你可以进入网站体验。该项目的源码在：Github，提供了一个 Vue 3.0 + Tailwind CSS + Iconify-Prerendered 的使用案例。

也欢迎各位使用 GithubStar.Pro 互赞平台，提高您的开源项目知名度，收获更多用户。

posted @ 2024-07-13 11:07 开源博客阅读(83) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部