1 引言

在前端开发中常用的图标通常是 SVG 格式的。SVG 是一种矢量图形格式，可以根据背景变色，且在缩放时边缘不会模糊。像常用的 Element Plus Icon 就是使用 SVG 格式实现的。不过，有时候会找不到我们想要的图标，比如“另存为”、“剪切板”等。引入其他图标集可能也未必包含所有需要的图标。此外，这样做改动太大，还需要确保所有图标在风格上的一致性（例如宽度、弧度的一致）。因此，需要自己制作一些图标。

2 SVG 简介

  • SVG 是一种使用 XML 定义的可缩放矢量图形。
  • 具体的 SVG 文件请参见：https://github.com/element-plus/element-plus-icons/ 中 packages/svg 目录下。
  • 建议以现有的图标为基础，以复制粘贴和调整为主。

2.1 示例

  • vue 中的 svg 格式形如：
1
2
3
4
5
6
7
8
9
10
11
12
13
<template>
  <svg viewBox="0 0 24 24">
    <path 
      d="M3 12 L12 3 L21 12 L12 21 Z"
      fill="currentColor"
    />
  </svg>
</template>
<script>
export default {
  name: 'YourIcon'
}
</script>

定义自己的 SVG，只需要修改 YourIcon 及 path 内容即可。

2.2 path 语法

这里的 "path" 不是指具体路径，而是描述图形轮廓的矢量指令集。基本语法如下：

  • M = 移动到 (Move to)
  • L = 画直线到 (Line to)
  • H = 水平线到 (Horizontal line to)
  • V = 垂直线到 (Vertical line to)
  • Z = 闭合路径 (Close path)
  • C = 曲线 (Curve)

3 svg 编辑工具选择

3.1 常用工具

试用了一些设计工具，具体如下：

  1. Figma
    • 在线工具：https://www.figma.com/
    • 用后感：
      • 在线使用，功能齐全，但学习成本较高
      • 我只用它制作 24x24 的小图标，有点大材小用
  2. SVGEeditor
    • 在线工具：https://svgeditoronline.com/
    • 用后感：
      • 功能过于简单，不太够用
  3. Inkscape
    • 本地使用，需要安装，约 140M
    • 用后感：
      • 功能多样且免费，用起来比较顺手

3.2 使用体验

  • 如果想简单一些，可以将一些免费的 SVG 资源复制其路径内容到自己的 Vue 文件中。
  • 如果需要自己设计并保持统一风格，建议使用 Inkscape。
  • 我觉得 24x24 的图标自己稍微修改一下就行，并不需要多么高深的艺术技能，而且使用次数不多，充会员也不值得。

4 inkscape 用法

4.1 安装

1
sudo apt-get install inkscape

4.2 做图标步骤

  1. 在菜单中选择“由模板新建”，并选择 24x24 的图标大小，或打开现有的 SVG 文件。
  2. 使用基础形状工具如矩形、圆形和线条进行绘制。如果熟悉 Photoshop，推荐使用钢笔工具。
  3. 选中绘制对象，打开右侧的填充/描边面板进行设置。
  4. 利用路径工具编辑节点。
  5. 导出 SVG 并将其复制到 Vue 文件中。
  6. 如果图形元素较多，导致布局混乱，可以使用 Copilot 进行优化，无需额外寻找优化工具，Copilot 能够自动解决。

4.3 从网页中抠图标

如果喜欢网页上的某个 SVG 图标，可以使用以下方法获取：

  • 在浏览器中打开 DevTools (F12)
  • 选择 Elements 面板
  • 找到图标元素
  • 右键 -> Copy -> Copy Element，获取其中的 svg 部分
  • 注意：要去除多余的 class

5 参考资源

现成的 SVG 资源可以参考以下网站：

  • Element Plus 图标预览：https://element-plus.org/zh-CN/component/icon.html
  • Heroicons 预览：https://heroicons.com
  • Font Awesome 预览：https://fontawesome.com/icons
    • 这个网站有部分免费资源，直接提供 SVG 格式内容复制
    • 复制 SVG 时，注意删除多余的注释