教程：用轻松打造你的技术图标墙

skillicons.dev 是一个非常流行且强大的在线工具，它能让你通过一个简单的 URL 链接，快速生成包含各种技术 Logo 的 SVG 图片。这对于在个人主页、在线简历或 GitHub Profile README 中直观展示你的技能栈非常有用。

Skill Icons 效果图

这篇教程将带你了解它的三种核心用法：

方法一：生成合并的单张图片（最常用）
方法二：为每个图标单独生成并添加悬浮提示（更具交互性）
方法三：在 Hugo 等静态网站中动态生成图标列表（最灵活）

方法一：生成合并的单张图片（最常用）

这是 skillicons.dev 最基础也是最核心的用法。它会将你指定的所有图标合并成一张 SVG 大图，非常适合在 GitHub README 或任何支持 Markdown 的地方使用。

步骤 1: 确定你要展示的图标

首先，你需要知道 skillicons.dev 支持哪些图标以及它们的 ID。你可以访问官方网站，在首页下方找到完整的 “Icons List”。

官方图标列表: https://skillicons.dev/

例如，JavaScript 的 ID 是 js，Python 是 py，Visual Studio Code 是 vscode。

步骤 2: 构建你的 URL

URL 的基本结构是：https://skillicons.dev/icons? 后面跟上自定义参数。

核心参数：i

i (icons): 用于指定图标列表，ID 之间用逗号 , 分隔。

例如，要展示 JavaScript, React 和 Node.js： ?i=js,react,nodejs

可选参数：theme 和 perline

theme (主题): 设置图标背景色。
- &theme=light (浅色主题，白色背景)
- &theme=dark (深色主题，深灰背景，此为默认值)
perline (每行数量): 设置每行最多显示多少个图标。
- &perline=8 (每行显示 8 个)

步骤 3: 整合并使用

将上述参数组合起来，我们就得到了一个完整的 URL。

示例： 我们想要一个浅色主题、每行最多显示 10 个图标的技术墙。

https://skillicons.dev/icons?i=js,ts,react,vue,nodejs,go,docker,mysql,redis,linux&theme=light&perline=10

你可以在 Markdown 中这样使用它：

[![我的技术栈](https://skillicons.dev/icons?i=js,ts,react,vue,nodejs,go,docker,mysql,redis,linux&theme=light&perline=10)](https://skillicons.dev)

效果：

方法二：为每个图标单独生成并添加悬浮提示

如果你希望鼠标悬浮在每个图标上时，都能显示对应的技术名称（例如 "JavaScript"），那么你需要为每个图标生成一个独立的链接。

这种方法更适合用在个人 HTML 网页中。

步骤 1: 生成单个图标的 URL

URL 结构和之前一样，只是 i 参数后面只跟一个 ID。

JavaScript 图标: https://skillicons.dev/icons?i=js
Docker 图标: https://skillicons.dev/icons?i=docker

步骤 2: 使用 HTML 和 CSS 进行布局

我们将使用 HTML 的 <img> 标签来显示每个图标，并用 title 属性来实现悬浮提示。

HTML 代码:

<div class="skill-icon-container">
  <a href="#" class="skill-icon" title="JavaScript">
    <img src="https://skillicons.dev/icons?i=js" alt="JavaScript Icon" />
  </a>
  <a href="#" class="skill-icon" title="TypeScript">
    <img src="https://skillicons.dev/icons?i=ts" alt="TypeScript Icon" />
  </a>
  <a href="#" class="skill-icon" title="React">
    <img src="https://skillicons.dev/icons?i=react" alt="React Icon" />
  </a>
  <!-- 在这里添加更多图标... -->
</div>

CSS 样式 (用于美化布局):

.skill-icon-container {
  display: flex;
  flex-wrap: wrap; /* 自动换行 */
  justify-content: center; /* 图标居中 */
  gap: 15px; /* 图标间距 */
}
.skill-icon {
  transition: transform 0.2s; /* 添加动画效果 */
}
.skill-icon:hover {
  transform: scale(1.1); /* 鼠标悬浮时放大 */
}
.skill-icon img {
  height: 48px; /* 统一图标大小 */
}

效果： 将鼠标移到下面的图标上试试看！

方法三：在 Hugo 等静态网站中动态生成图标列表

如果你在使用像 Hugo、Jekyll 或 Next.js 这样的静态网站生成器，最佳实践是将技能列表定义在一个数据文件中，然后让模板去循环渲染它们。这样维护起来非常方便。

步骤 1: 创建数据文件

以 Hugo 为例，在你的项目根目录下创建一个 data 文件夹，并在其中新建一个 skills_icons.yaml 文件。

data/skills_icons.yaml:

# id: skillicons.dev 网站上对应的图标ID
# name: 鼠标悬浮时显示的名称
- id: go
  name: Go
- id: python
  name: Python
- id: docker
  name: Docker
- id: kubernetes
  name: Kubernetes
- id: linux
  name: Linux

步骤 2: 在 HTML 模板中循环渲染

在你的 HTML 模板中（例如 layouts/index.html），使用 Hugo 的 range 函数来读取数据并生成图标。这结合了方法二的思路，但实现了自动化。

<!-- 假设你已经准备好了方法二中的 CSS 样式 -->
<div class="skill-icon-container">
  {{ range site.Data.skills_icons }}
  <a href="#" class="skill-icon" title="{{ .name }}">
    <img src="https://skillicons.dev/icons?i={{ .id }}" alt="{{ .name }} Icon" />
  </a>
  {{ end }}
</div>

这样做的好处： 当你想添加或删除一个技能时，你只需要修改 skills_icons.yaml 这个数据文件，而无需触碰任何 HTML 代码，非常高效且不易出错。

总结

skillicons.dev 是一个非常灵活的工具，无论你的需求是简单还是复杂，它都能满足：

想要快速在 GitHub 展示？ 使用 方法一，一条 URL 就搞定。
想在个人网站上增加交互性？ 使用 方法二，为每个图标添加悬浮提示。
正在构建一个结构化的个人网站？ 采用 方法三，将数据与视图分离，实现优雅维护。