• 客服QQ: 50183970

仿站问题

  • 首页 >问题 > 仿站问题 >

制作前端开发中 SVG 图标

  • 2025-07-22 15:23:43

1 引言

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

2 SVG 简介

2.1 示例

  • vue 中的 svg 格式形如：
<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'}

定义自己的 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<svg width="10px" height="10px" viewBox="0 0 16 16" class="ZDI ZDI--FourPointedStar16 css-1dvsrp" fill="currentColor"></svg>
  • 在线使用，功能齐全，但学习成本较高
  • 我只用它制作 24x24 的小图标，有点大材小用




  • 本地使用，需要安装，约 140M
  • 用后感：

3.2 使用体验

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

4 inkscape 用法

4.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 资源可以参考以下网站：

上一篇：HTML 实体字符
下一篇：没有了