本文发表于 2016 年 4 月 25 日，大约需要 5 分钟） 阅读。
如果您正在阅读本文，那么我可能会假设您已经决定从使用字体图标转换为 SVG 图标系统。或者，也许您正在考虑这个想法，并希望获得有关该方法的概述以及它是否值得。无论哪种方式，这篇文章都可以在这里为您提供帮助。
如果您尚未确定为什么 SVG 是更好的图标系统，那么我强烈建议您阅读本文—图标字体和图标系统的嵌入式 SVG 之间的笼式匹配样式比较。包括 Github 在内的许多公司和组织已经转而使用 SVG，并撰写了许多出色的文章，解释了为什么他们认为 SVG 是更好的选择。我在这篇文章的结尾列出了一些文章，以供进一步阅读。
进行切换
1. 抓取图标字体文件。
字体图标是字形。它们是网络字体的一部分，因此以网络字体文件和格式定义。
我通常不使用图标字体，因此，为了演示起见，我前往Fontello.com（一个在线图标字体生成器）创建了我可以用于此博客文章的图标字体。我选择了一些图标，然后生成了图标字体并下载了它。
Fontello 生成一个包含演示页面的文件夹，该演示页面向您显示如何在自己的页面上显示图标以及要使用的类名。
Fontello 生成的文件。
在生成的文件中，是用于定义图标的实际字体。字体文件位于font文件夹内。
Fontello 生成的字体文件格式。
这些是您需要继续的文件。我们将使用这些文件来 “提取” 图标并将其转换为 SVG。
2. 选择您的工具。
要将图标转换为 SVG，我们可以使用以下工具之一：
- fontello-svg: “a command-line tool to generate the SVG versions of a Fontello icon set, with a corresponding CSS file.”
- font-blast: “You can use font-blast to extract icons from any icon font - Font Awesome, Foundation, anything from Fontello etc.”
- Icomoon app: a web app for generating and creating icon sets in both SVG and icon font formats.
I’m sure there might be more tools to do this, but these are the ones I know about.
I’m going to be using Icomoon and font-blast in this article because they’re general tools that can be used with any font and are not restricted to just one. Both fontello-svg and font-blast are used pretty much the same way, and you can find extra information about fontello-svg in the Github repository’s Readme.
3. Convert the font icons to SVG icons.
3.1. Using Icomoon
To convert the font icons to SVG icons using Icomoon, we first need to upload them.
Your font icons will be available as an icon set in the app. The next steps are the same steps you would take if you were choosing from the set of already-available icons on the page:
- Select the icons you want to download as SVG.
- Click the Generate SVG & More button.
Like Fontello, Icomoon generates a folder containing the icons you generated, along with a demo page showing you how they can be used on your own pages.
The icons you’ve converted to SVG are available in the SVG folder.
There is one SVG file for every icon. The set is ready to be embedded in your page.
But before embedding the icons, you might want to sprite them. That is, create one SVG sprite that contains all of the icons, and then use that sprite to display each icon at a time, wherever needed on the page. Icomoon conveniently generates an SVG sprite (symbol-defs.svg) for you along with a polyfill (svgxuse.js) for older browsers that don’t support external sprite references.
3.2. Using font-blast
To convert the font icons to SVG icons using font-blast you need to first install font-blast using npm via your terminal.
The -g flag (short for global) ensures that you can run the script anywhere on your computer, regardless of the installation root.
As mentioned in the font-blast documentation, “You can generate icons from the command line by called the script with two parameters: the SVG file of the font, and the directory where inidivual icons should be placed”:
My command looked like this:
Tip: You can drag your folder into the terminal, which will sort of drop the path to that folder into the terminal, so you don’t have to manually write it or grab it and then copy-paste it.
Running the above command, font-blast retrieves the icons from the font files and creates an SVG icon for each one, and saves the result to the folder you specify in the command line. My terminal then looks like this:
The result of running the font-blast command in the terminal, letting us know how many icons were found and converted to SVG.
The svg-icons folder I chose for the generated files looks like this:
The files generated by font-blast show the source font file used to extract the icons and include a folder containing the generated SVG icons.
As you have guessed, the SVG folder contains the generated SVG icons:
The font-blast-generated SVG icons.
The icons are then ready to be embedded on your page.
4. Sprite, Embed, Style, Animate, Have fun!
There are three main ways to create and use SVG sprites. I wrote an overview of these techniques here. We will explore each of these techniques in more detail in an upcoming article (or a series of articles), show the pros and cons of each one, and how to create and use the SVG sprites, so stay tuned.
You can subscribe to the RSS feed of my blog to stay up-to-date with new articles. An e-mail newsletter is in the works too!
Recommended Reading:
- Inline SVG vs Icon Fonts [CAGEMATCH] — a must-read that clearly highlights the advantages of SVG and why it’s a superior icon system format.
- Seriously, Don’t Use Icon Fonts
- Seriously, Use Icon Fonts — I still recommend using SVG for icon systems, but it’s always good to read a different point of view.
- Delivering Octicons with SVG on the Github blog
- Ten reasons we switched from an icon font to SVG
Find similar articles under: #svg
若有收获，就点个赞吧
0 人点赞
