推荐：Glyph——一款全能SVG图标集合

推荐：Glyph——一款全能SVG图标集合

Glyph 是一个精心设计的SVG图标库，包含了约800个精美像素完美的图标，专为现代网页设计而打造。这些图标在原始尺寸下是16x16，但得益于SVG格式，它们可以自由调整到任何大小而不失清晰度。

更新动态

Version 1.1

• 修复了一些拼写错误。
• 添加了自定义精灵（Sprite）生成器。

使用方法

有多种方式将SVG图标整合到你的网页中：

<img> 标签

<img src="svg/si-glyph-bicycle-man.svg">

内联SVG

或者，你可以直接复制SVG内容并将其粘贴到HTML中。

SVG精灵

通过在sample.html中演示的方法，你可以优雅地使用SVG精灵，利用<use>标签链接SVG精灵文件中的图标内容到你的HTML中。

<svg xmlns="http://www.w3.org/2000/svg" class="si-glyph-bubble-message-hi">
    <use xlink:href="sprite.svg#si-glyph-bubble-message-hi" />
</svg>

作为Web组件使用

通过icon web component，你可以使用自定义标签轻松嵌入图标。代码示例可在sprite/sample-iwc.html中查看。

<svg-icon>
    <src href="sprite.svg#si-glyph-bubble-message-hi"/>
</svg-icon>

使用CSS进行样式设置

由于使用内联SVG和Web组件方法，你可以轻松地用CSS来改变图标的样式。Glyph图标集特别设计成只需以下简单的CSS片段就可以改变所有或部分图标的颜色。

设置整个图标集的颜色：

.si-glyph * {
    fill: red;
}

仅改变特定图标的颜色：

.si-glyph-bubble-message-hi {
    fill: blue;
}

自定义精灵生成器

从版本1.1开始，Glyph提供了一个自定义精灵生成脚本，你需要Node.js才能运行这个脚本。

在终端中进入Glyph目录，然后执行：

node generator/generate.js

支持以下选项：

• -f <csv-file> 指定CSV文件路径，文件中一列是你要包括在精灵中的图标名称。
• -l <list-of-icons> 以逗号分隔的图标列表，例如：bubble-message-hi,camera,car,alarm-clock
• -o <path-to-sprite> 输出精灵文件的路径。

例如：

node generator/generate.js -l camera,car,alarm-clock -o some-icons.sprite 

待办事项

• 新增图标。

许可证

本项目遵循 ** Attribution-ShareAlike 4.0 International (CC BY-SA 4.0)** 许可证。

---

无论是用于个人项目还是商业应用，Glyph都提供了极大的灵活性和便利性，让你能够轻松集成和定制符合设计风格的图标。不论是小屏幕设备还是高分辨率显示屏，它的效果都将一如既往地出色。现在就尝试将Glyph添加到你的下一个项目中吧，你会发现它能为你带来的不仅仅是视觉上的提升，更是开发效率的提升。