README

is an – at present: proof-of-concept – command line tool that helps you prepare your vector based SVG icons for use with the widest possible range of devices. It takes a folder of SVG files and processes them to a bunch of files including

原始 SVG图标 的清洁版本（可选），
单个紧凑的 SVG图标精灵，
单个 PNG图标（可选），
一个组合的 PNG图标精灵，
几个不同格式的 CSS文件，包括
- SVG单图像图标（可选），
- SVG数据URI,
- SVG精灵引用,
- PNG单图像图标（可选），
- PNG数据URI和
- PNG精灵引用,
这些CSS文件的 Sass变体（scss方言），以便轻松将其包含到Sass项目中，
一个包括一些用于异步加载最合适的图标变体的JavaScript的 HTML片段，
最后是一些用于预览和测试不同图标变体的 HTML预览文档（根据您指定的选项而定）。

要充分利用 iconizr，必须在系统中独立安装一些额外的工具（见下文）。

iconizr是用（命名空间化的）PHP编写的，并旨在在（Linux）命令行（即，使用PHP CLI SAPI）上使用。老实说，选择PHP只有一个原因：这是我最擅长的。我相信还有很多其他花哨的现代语言和技术可以达到同样的效果，但我猜我可能不够聪明。话虽如此，我欢迎任何人贡献一个 iconizr 的移植版本。

入门

由于 iconizr 是用PHP编写的，所以安装过程很简单。只需将 iconizr.phps 脚本（以及它的相关文件和目录）放到您喜欢的位置，并确保它可以通过设置正确的文件权限来执行。如果您想简化iconizr的调用，您可以在本地可执行文件目录中创建一个符号链接，例如。

ln -s /path/to/iconizr.phps /usr/local/bin/iconizr

通过使用适当的命令行选项调用脚本以运行 iconizr（见下文）。请注意，出于安全原因，输出目录必须是当前工作目录的子目录（子）目录，因此如果需要，请首先更改工作目录

cd /path/to/website/docroot
/path/to/iconizr.phps --css --out css source/svg

或使用上面提到的符号链接

iconizr --css --out css source/svg

本程序将处理在 /path/to/website/docroot/source/svg 目录下找到的所有 SVG 文件，并将生成的 CSS 文件和精灵渲染到 /path/to/website/docroot/css 目录（及其子目录）。为了简化示例，省略了 Sass 文件。

文档

用法

iconizr [options] input/dir1 [input/dir2 ...]

CSS 伪类

从 Beta 5 版本开始，iconizr 支持为单个图标使用 CSS 伪类（如 hover 或 active 状态）。要将图标绑定到特定的伪类，只需将其作为后缀附加到图标文件名上，后缀由 --pseudo 参数指定的字符串（默认为波浪线 ~）分隔。例如，两个名为的图标文件

	foo-bar.svg
	foo-bar~hover.svg

将生成以下 CSS 规则

	icon-foo-bar { ... }
	icon-foo-bar:hover { ... }

这样，您可以轻松地为图标实现正常和 hover 状态。一般来说，任何可以想到的伪类都可以这样生成，只要涉及的字符在您的系统文件名中是允许的。实际上，iconizr 并不知道什么是真正的 CSS 伪类，什么不是，它只是简单地用冒号替换分隔符...以下是一些合理的示例

	hover
	active
	target
	first-child
	last-child
	nth-child()
	...

本包中包含的暴风雨图标是一个具有 hover 状态图标的示例

在 HTML 预览文档中，将显示两个图标，如果您将鼠标悬停在常规图标上，您还可以看到它的 hover 状态。

对于每个伪类，iconizr 还会添加一个额外的 CSS 选择器，您可以使用该选择器显式地将状态图标样式应用到元素上（与元素的实时状态无关）。从版本 v0.1.2 开始，iconizr 甚至为常规图标状态添加了这样的选择器（设计上没有伪类），因此您也可以使用此图标变体，而无需让其他伪类生效

	icon-foo-bar, icon-foo-bar\:regular { ... }
	icon-foo-bar:hover, icon-foo-bar\:hover { ... }

要将这些图标样式应用到 HTML 元素上，请按以下方式使用

	<span class="icon-foo-bar:regular">Regular icon state</span>
	<span class="icon-foo-bar:hover">Hover icon state</span>

使用冒号作为 CSS 类名的部分似乎很奇怪，但实际上这是完全合法的 - 您只需在您的 CSS 文件中使用反斜杠 \ 转义冒号即可。

与 grunticon 的比较

虽然与 Filament Group 的 / Scott Jehl 的 grunticon 做了很多相同的事情，但 iconizr 特别关注减少文件大小和 HTTP 请求的数量，特别是针对移动设备

在将 SVG 文件转换为数据 URI 或嵌入 SVG 精灵之前，会清理和清除由 SVG 编辑应用程序引入的大量冗余数据。
在用于数据 URI 或 PNG 精灵之前，PNG 文件会进行无损优化（并且可以选择性地量化为 8 位文件）。
只要 甚至一个图标 需要外部加载（由于超出潜在的数据 URI 大小限制），所有图标 都将通过相应的精灵进行加载。

SVG 的 data-URI 是否没有限制？哪个具有 SVG 支持的浏览器具有最小的 data-URI 限制？

要求

要运行 iconizr，您需要在您的机器上安装一些程序。这些是

PHP（有点明显）
PhantomJS（用于将 SVG 绘图的 PNG 图像渲染为 PNG）

对于 SVG 优化，您需要以下之一（或两者都需）

SVGO（需要 Node.js ...）
Scour（需要Python 2 ...）

为了PNG优化，您应该尽可能多地拥有以下工具

其他版本

我目前正在进行原生Node.js / Grunt / Gulp.js版本的iconizr实现。作为第一步，我发布了svg-sprite（分别grunt-svg-sprite），这将作为SVG精灵生成组件。与基于PHP的iconizr相比，svg-sprite拥有许多改进，如基于Mustache模板的输出，因此您可以生成定制的CSS输出（格式）。我计划将这些改进也回滚到基于PHP的版本。

此外，我非常高兴地宣布，Haithem Bel Haj 发布了一个基于PHP版本iconizr的iconizr Grunt插件，因此您可以直接使用Grunt开始使用iconizr！酷吧？

资源

有关数据URI的一般信息有一些有用的资源

一旦我找到时间，我将在我们的Open Device Lab进行一些测试，看看是否有任何特定设备的数据URI限制。

关于SVG支持的资源

我能使用SVG吗

法律

自版本0.1.1起，iconizr采用MIT许可条款。在此之前，适用Creative Commons Attribution 3.0 Unported License。

包含的示例SVG图标是Tango Icon Library的一部分，属于公共领域。

jkphl / iconizr

维护者

详细信息

README

入门

文档

CSS 伪类

与 grunticon 的比较

要求

其他版本

资源

法律