您当前所在位置：首页攻略图标类型及使用指南

图标类型及使用指南

更新：2024-07-13 11:49:18编辑：游戏资讯归类：攻略

目前，网页设计中主要使用两种图标类型：字体图标和矢量图标。

字体图标是指在网页加载时下载整个图标库，通常使用特定标签如 来调用。虽然方便实现文字混排，但包体积大且难以自定义。

矢量图标则是以

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

矢量图标来源

目前比较全面的图标集包括：

Google Material Symbols（之前的Google Icon） ：现代化图标集，包括圆角尖角图标集、空心实心图标集，主打交互图标，无商标。
Material Design Icons ：Material风格的另一个图标集，内容丰富。
Iconfont ：阿里的图标库，包含多种带颜色的特殊图标。
Iconify ：一个各种图标集的收集站，我们后文使用的包可以使用其中的所有图标集。

以上图标集基本可以满足任何使用要求。

安装图标包及其剪枝策略

为了在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后会自动剪枝，不会再出现这种情况。

图标与文字混排

由于我们使用的图标包本质上会将图标以 <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>

自定义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>