菜单

图标集

相关源文件

本页面详细介绍了 Nerd Fonts 中包含的各种图标集,以及它们如何集成到修补字体中。Nerd Fonts 集成了 Devicons、Font Awesome、Material Design Icons 等多个图标集,以提供全面的编程和开发相关字形集合。有关字形定义结构的详细信息,请参阅字形定义

支持的图标集

Nerd Fonts 集成了多个图标集,每个图标集都提供针对特定用例的不同类型的字形。下图展示了项目中包含的主要图标集

来源:bin/scripts/lib/i_dev.sh1-517

图标集集成过程

Nerd Fonts 中的每个图标集都遵循特定的集成过程。下图说明了图标集(以 Devicons 为例)如何被处理并集成到 Nerd Fonts 中

来源:src/glyphs/devicons/generate1-141 src/glyphs/devicons/analyze1-160

Devicons

Devicons 是 Nerd Fonts 中的主要图标集之一,提供编程语言、框架和开发工具图标。它来源于 Devicons project 并被 Nerd Fonts 采用。

Devicons 集成

Devicons 在 Nerd Fonts 中的集成涉及以下几个步骤

  1. 下载 Devicons 仓库
  2. 分析现有图标和新图标
  3. 创建映射文件
  4. 生成字体文件和 Shell 脚本变量

该过程通过 src/glyphs/devicons/ 目录中的脚本实现自动化。

来源:src/glyphs/devicons/generate1-141 src/glyphs/devicons/analyze1-160 src/glyphs/devicons/mapping1-10

映射格式

Devicons 映射文件遵循特定的格式,用于将原始图标代码点映射到 Nerd Fonts 代码点

DEV-code NF-code filename name [alias [...]]

其中

  • DEV-code:Devicons 字体中的原始代码点
  • NF-code:Nerd Fonts 中分配的代码点
  • filename:SVG 文件的路径
  • name:图标的主名称
  • alias:图标的可选别名

映射文件示例

E602 E702 git/git-plain.svg git
E609 E709 github/github-original.svg github github_badge

来源:src/glyphs/devicons/mapping1-10

Devicons Shell 变量

生成的 shell 脚本 (i_dev.sh) 通过以 i_dev_ 为前缀的变量提供对 Devicons 字形的轻松访问。此脚本用于终端应用程序中,无需直接输入代码点即可显示图标。

以下是 i_dev.sh 中定义的 shell 变量示例

可变字形描述
i_dev_git''Git 图标
i_dev_github''GitHub 图标
i_dev_nodejs''Node.js 图标
i_dev_python''Python 图标
i_dev_ruby''Ruby 图标
i_dev_angular''Angular 图标
i_dev_react''React 图标

来源:bin/scripts/lib/i_dev.sh8-516

图标集定制

某些图标集需要定制才能在 Nerd Fonts 中正常工作。这包括:

  1. 修复的 SVG:针对特定图标的自定义或修正 SVG 文件
  2. 缩放和定位:在字体生成过程中进行的调整
  3. 自定义别名:为常用图标添加的额外名称,以便于引用

下表显示了 Devicons 集中定制图标的示例

图标原始文件修复文件修复原因
Nginxnginx/nginx-plain.svgfixed/nginx-plain.svg提高清晰度或兼容性
AWK(无)fixed/awk-plain.svg作为自定义图标添加

来源:src/glyphs/devicons/fixed/nginx-plain.svg1-2 src/glyphs/devicons/analyze22-41

图标集代码点分配

Nerd Fonts 中的每个图标集都被分配了一个特定的 Unicode 代码点范围,以避免不同集之间的冲突。对于 Devicons,代码点范围从 E700E8EF

来源:bin/scripts/lib/i_dev.sh3-4 src/glyphs/devicons/generate15-16

字体生成过程

图标集的字体生成过程涉及以下几个关键步骤

  1. 读取映射文件以确定要包含的图标
  2. 如有必要,下载并解压原始图标集
  3. 应用任何修复/自定义图标
  4. 处理每个 SVG 文件并将其导入字体
  5. 应用缩放和定位等转换
  6. 生成字体文件和 Shell 脚本变量

Devicons 生成过程摘录

来源:src/glyphs/devicons/generate35-51 src/glyphs/devicons/generate98-126

使用图标集

Nerd Fonts 中包含的图标集可以通过多种方式使用

  1. 直接 Unicode 输入:直接使用代码点(例如,\uE702
  2. Shell 变量:使用生成的 shell 变量(例如,$i_dev_git
  3. CSS 类:使用为 Web 用途生成的 CSS 类

Shell 变量使用示例

来源:bin/scripts/lib/i_dev.sh8-516

图标集版本控制

Nerd Fonts 中的每个图标集都根据其上游来源进行版本控制。例如,Nerd Fonts 中的 Devicons 基于原始 Devicons 项目的 v2.16.0 版本。

版本信息包含在生成的字体文件和 shell 脚本中,以帮助跟踪正在使用的原始图标集版本。

# Devicons (version v2.16.0, 496 icons, 12 aliases)
# Does not include all icons of the release
# Codepoints: E700-E8EF
# Nerd Fonts Version: 3.3.0-49

来源:bin/scripts/lib/i_dev.sh2-6 src/glyphs/devicons/generate15-16

总结

Nerd Fonts 通过一个结构化的过程集成了多个图标集,该过程包括:

  1. 分析和映射原始图标集
  2. 生成具有适当代码点分配的字体文件
  3. 创建 shell 脚本变量以便轻松访问图标
  4. 在必要时应用定制和修复

这种方法使 Nerd Fonts 能够提供一个全面的来自各种来源的图标集合,同时保持在不同平台和应用之间的兼容性和易用性。