❤
npm
Sign UpSign In

icons-font-customization

1.2.1 • Public • Published

icons-font-customization

A collection of over 33,000 high-quality free svg icons and tools for generating customized icon font. All icons are completely free for personal or business requirements.
Open See all icons, to view all icons. You can change color, background color, size for icons and can search or cache selected results.
Update: Now you can download PNG, JPG, ICO and Apple ICNS image files directly from online.
🔶Desktop Application for Windows, Linux, MacOS is released, or goto Download Releases 🔶

（中文说明请参考后半部分）

🔶All icons collected here are completely free for your personal or business requirements.🔶
You can use this tool to combine / generate your own icon webfonts for your project from different sources.
This relevant license information is included in generated css file automatically.
logo.png

Icon Collections:

How to use

(If you haven't install Node.js, go here: Downloading and installing Node.js and npm)
There are a few approaches. Here I list three simple ways to run this project.

First of all, a little information about which project (or package) you should install

Actually there are two projects that can do the same work for you.

  • 1.1, This project (icons-font-customization) contains more than 26M of svgs data. You can install this project if you don't mind the size then it works locally and copies icons quickly.
  • 1.2, Either you can install a sub project called icons-font-command, which doesn't contain any icons and is very small. icons-font-command copies icons from Github's repository of icons-font-customization remotely. If you don't have too many icons to generate your font then possibly this is better approach.
    Project icons-font-customization contains icons-font-command. So either of them uses same command to generate font.
    Here I use project icons-font-command to explain how to use it. If icons-font-customization suits you, you'll need to use icons-font-customization in installation commands.

Approach 1, Download or clone this Repository to your local machine.

"Download ZIP" from project home page and unzip it.
Or clone it by running this command:
git clone https://github.com/uuware/icons-font-command.git
Either you'll get this project then cd to that folder and run command to generate icon font (-- -- in command is correct):
npm run generate-font -- --config config-file-path
If you have a config file at current folder and it's name is icons-font.config.js, then run it without parameters:
npm run generate-font

Approach 2, Use NPM to install icons-font-command (or icons-font-customization) globally.

Run command:
npm install -g icons-font-command
Now you can run command at any folder (no matter which project you installed, the command is same and pay attention to -- in command):
icons-font-command --config config-file-path
Or at current folder if file icons-font.config.js exists, then run:
npm run generate-font
You can use this command to copy default configuration file to current folder:
icons-font-command --copyconfig

Approach 3, Install it in your Node.js project.

If you want to use code to operate it, then depending on your needs, run npm i icons-font-command --save-dev or npm i icons-font-customization --save-dev at your project's root folder.
Then in your javascript code, you can call it like this:

var IconsFontLite = require('icons-font-command');
IconsFontLite.cmd();

// Or pass parameters
var parameters = {'--config': 'config-file-path'};
var IconsFontLite = require('icons-font-command');
IconsFontLite.generateFont(parameters);

If all good, you'll get results at output folder, open sample.html to confirm the results or include the icon-style.css in your html to use those icons font.

How to choose your icons and get it in configuration code

1, Open See all icons, then you can view all icons.

You can change color, background color, size for icons. Also you can search and click them to choose or cache selected states.
Click button "Populate Configuration" to output configuration code.

2, Paste the configuration code to file "icons-font.config.js".

In Approach 2 you can run command icons-font-command --copyconfig to copy default "icons-font.config.js" to your current folder(where you are running this command), otherwise you need to copy if from root of icons-font-command.
As a sample, the final structure should be (Don't use this sample but copy original "icons-font.config.js" please):

module.exports = {
  fontName: 'i-font',
  outputPath: 'dist/sample/',
  outputName: 'i-font', /* automatically add font extension to it  */
  startChar: 10000, // unicode start number
  icons: [
     /* copy svg from icons-font-customization locally or remotely */
    { path: 'font-awesome/brands/apple.svg', name: 'fa-apple' },
    ...
     /* download svg from any other websites */
    { path: 'https://raw.githubusercontent.com/fontello/awesome-uni.font/29d4e3ff028fc850a21b5eaafde0a83f22f59cf1/src/svg/amazon.svg', name: 'fa-amazon' },
  ],
  fontType: {
    'woff2': true,
    'woff': true,
    'ttf': true,
    'eot': false,
    'svg': false,
  },
  cssTemplate: 'copy from icons-font.config.js...',
  htmlTemplate: 'copy from icons-font.config.js...',
}

Compatibility

  • WOFF2: Chrome 36, Firefox 39, Opera 23, Safari 10, IE no support, Edge 14
    WOFF File Format 2.0. WOFF2 is the next generation of WOFF. The WOFF2 format offers a 30% average compression gain over the original WOFF.

  • WOFF: Chrome 5, Firefox 3.6, Opera 11.10, Safari 5.1, IE 9, Edge 12
    Web Open Font Format. WOFF is basically OTF or TTF with metadata and compression supported by all major browsers.
    It is the result of collaboration by the Mozilla Foundation, Microsoft, and Opera Software. Because fonts are compressed, they load faster.

  • TTF: Chrome 4, Firefox 3.5, Opera 10, Safari 3.1, IE 9, Edge 12
    TrueType Font. This format has been supported by all major browsers, but TTF fonts work in IE 9 and later only when the embedding bits are set to installable.

  • EOT:Chrome no support, Firefox no support, Opera no support, Safari no support, IE 6-11
    Embedded OpenType. It’s the only format that IE8 and below will recognize when using @font-face.

  • SVG font: Chrome 4-37, Firefox no support, Opera 10-24, Safari 3.2-14, IE/Edge no support
    Scalable Vector Graphics font. SVG fonts are always uncompressed and the only one allowed by version 4.1 and below of Safari for iOS (iPhone, iPad).

Suggestions:

  • 1, use WOFF2 for major browsers except IE;
  • Or: 2, use WOFF for major browsers and IE 9~, Edge 12~
  • Or: 3, combine WOFF2 with TTF for IE8~
    All 1, 2, 3 needs this code in HTML: <i class="ifc-icon icon_name"></i>
  • Or: 4, combine WOFF2 with TTF and plus alternate CSS to support IE6-7, IE8~ and major browsers. Because '.css_class_name:before (not double-colon){ content: "" }' in css is only supported from IE8, so for IE6-7 it needs different code in html (this code is also supported by other mentioned browsers): <i class="icon ifc-icon">&#x66;(icons code)</i>

Contacts

Bug reports & Questions & Suggestion: Issue tracker

Contribute

How to add an new wonderful svg icons project?

If you are the owner of a svg icons project and want to share it to others, then I'm very happy to add it if you send the request to me.

If you want to add for your local development, then you can do like this:

    1. Download or Clone this project https://github.com/uuware/icons-font-customization.git
    1. Create a new folder under /dist/svgs, based on your project name. For example, here we call it new-project, so the new folder should be /dist/svgs/new-project.
    1. Add a json file to describe the information of the project and a license file.
      Please check files in other folders to confirm the json file structure.
    1. Add sub folder (svgs or whatever) and copy svgs to /dist/svgs/new-project/svgs
    1. Run cmd "icons-font-command --maintain" to optimize svgs and create demo page.
    1. Then you can use your new svg icons as same as all others.

License

  • All code (all files, except svgs, fonts) is distributed under CC0-1.0 License.
  • All svgs and fonts are distributed under their primary licenses.
    See information for credits & links to homepages in individual folders under /dist/svgs. This information is also included in generated css file.
    All used trademarks, brands and/or names are the property of their respective owners. The use of these trademarks, brands and/or names does not indicate endorsement of the property holder by us, nor vice versa.

Known issues:

  • 1, It seems that svgs with fill-rule="evenodd" do not work correctly
    Currently if svgs have fill-rule="evenodd" then they lose some shapes when change to font. I haven't found any way to do so easily. So if a icon seems weird, just skip to use it.
  • 2, Some icons are reduplicated.

Donation

The main contribution belongs to the elites who created these elves. Please encourage and reward them a cup of coffee!

（中文说明，包含在同一个文件的原因是这种方式发布NPM的时候比较友好）

icons-font-customization

一个包含超过 33,000 高品质免费 svg 图标的集合和生成自己图标字体的工具。所有图标都适合于私人或商业项目。
请打开链接 所有图标, 去确认这些精灵。在这个链接，可以更改图标颜色，背景色和大小。还可以根据关键字检索，保存图标是否选中的状态，或输出选中图标的列表字符串，用于下面介绍的生成自己的图标字体。
更新：现在可以直接online下载PNG和JPG, ICON, Apple ICNS格式的图片文件了。

🔶这儿收集的所有图标都适合于私人或商业项目🔶
这个工具可以把本项目包含的不同来源的图标打包成一个字体文件，甚至可以下载任何网址的 svg 文件并进行转换打包。
各个来源图标的相关许可证信息会被自动包含在生成的 css 文件中。

怎么使用

（如果电脑还没有安装 Node.js, 请去这儿下载安装： Downloading and installing Node.js and npm）
有很多种使用这个工具的方法。这儿我列出三种基本的方式。

首先是一点关于这个项目（包或工具）的信息，和该具体选择哪个项目

实际上这儿有两个项目，都可以达到相同目的。

  • 1.1, 当前这个项目（icons-font-customization）包含超过 26M 大小的 svg 文件。如果您不是太在意磁盘空间，那么可以安装这个项目。这样您将非常能快速的利用本地 svg 文件生成字体。
  • 1.2, 或者您可以安装一个叫 icons-font-command 的子项目，这个子项目不包含任何 svg 图标，因此非常小。 icons-font-command 从 Github 的 icons-font-customization 仓库直接的远程拷贝图标等。如果您不会使用太多的 svg 文件，它也是很快的。
    • 项目 icons-font-customization 包含 icons-font-command 项目. 因此不管您使用哪一个项目，命令方式都是一样的。*
    • 这儿的例子我都是以使用 icons-font-command 来介绍的。如果您使用 icons-font-customization ，那么您需要替换安装例子中的项目为 icons-font-customization 。*

方法1，下载或克隆您需要的项目到本地。

点击项目主页 home page 的 "Download ZIP" 并解压到本地合适的文件夹。
或者使用 git 命令克隆到本地：
git clone https://github.com/uuware/icons-font-command.git
不管使用哪种方式，您将在本地得到这个项目，然后 cd 到这个项目的根文件夹并运行下面的命令来生成字体。（注意，命令行中的 -- -- 是正确的）：
npm run generate-font -- --config config-file-path
如果您在运行文件夹有一个叫 icons-font.config.js 的配置文件，那么可以省略配置文件路径：
npm run generate-font

方法2，使用 NPM 全局安装 icons-font-command （或 icons-font-customization）。

运行：
npm install -g icons-font-command
现在您可以在任何文件夹中运行命令（无论您安装的是哪个项目，该命令都是相同的，并注意命令中的 --）：
icons-font-command --config config-file-path
如果您在运行文件夹有一个叫 icons-font.config.js 的配置文件，那么可以省略配置文件路径：
npm run generate-font
您还可以使用此命令在当前文件夹生成默认配置文件：
icons-font-command --copyconfig

方法3，在您的 Node.js 项目中安装。

如果想要在代码中自由的操作它，则根据您的需要，在项目的根文件夹中运行 npm i icons-font-command --save-dev 或 npm i icons-font-customization --save-dev 命令。
然后在代码中这样调用：

var IconsFontLite = require('icons-font-command');
IconsFontLite.cmd();

// Or pass parameters
var parameters = {'--config': 'config-file-path'};
var IconsFontLite = require('icons-font-command');
IconsFontLite.generateFont(parameters);

如果一切正常，你将在输出文件夹得到结果，打开 sample.html 确认结果或包含 icon-style.css 在您的html中。

如何选择图标并获得在配置中使用的代码

1, 打开 所有图标, 然后您可以确认所有图标。

您可以更改图标的颜色、背景色和大小。您还可以搜索并单击它们来选择或缓存选定的状态。
点击 "Populate Configuration" 按钮输出配置代码。

2, 将配置代码粘贴到文件 "icons-font.config.js" 。

在方法2中，您可以运行 icons-font-command --copyconfig 在当前文件夹生成默认的 "icons-font.config.js" 配置文件。或者您可以从项目 icons-font-command 的跟文件夹拷贝该文件。
作为一个示例，最终的结构应该是 （不要使用这个示例，而是复制原始的 "icons-font.config.js" 文件）：

module.exports = {
  fontName: 'i-font',
  outputPath: 'dist/sample/',
  outputName: 'i-font', /* 程序会自动添加扩展名  */
  startChar: 10000, // 图标字体的内部编码
  icons: [
     /* 本地或远程 svg 的路径 */
    { path: 'font-awesome/brands/apple.svg', name: 'fa-apple' },
    ...
     /* 甚至下载任何网址的 svg  */
    { path: 'https://raw.githubusercontent.com/fontello/awesome-uni.font/29d4e3ff028fc850a21b5eaafde0a83f22f59cf1/src/svg/amazon.svg', name: 'fa-amazon' },
  ],
  fontType: {
    'woff2': true,
    'woff': true,
    'ttf': true,
    'eot': false,
    'svg': false,
  },
  cssTemplate: 'copy from icons-font.config.js...',
  htmlTemplate: 'copy from icons-font.config.js...',
}

兼容性

  • WOFF2: Chrome 36, Firefox 39, Opera 23, Safari 10, IE no support, Edge 14
    WOFF 的 2.0 版本。WOFF2 下一代版本的 WOFF。 WOFF2格式比原始WOFF格式提高了30%的平均压缩增益。

  • WOFF: Chrome 5, Firefox 3.6, Opera 11.10, Safari 5.1, IE 9, Edge 12
    Web开放字体格式。WOFF 基本上是 OTF or TTF 上添加了压缩，并被主流浏览器支持。
    它是 Mozilla Foundation，Microsoft，和 Opera Software 和合作结果。因为字体被压缩了，它有更快的加载速度。

  • TTF: Chrome 4, Firefox 3.5, Opera 10, Safari 3.1, IE 9, Edge 12
    TrueType 字体. 所有主流浏览器和IE 9及更高版本都支持这种格式。

  • EOT:Chrome no support, Firefox no support, Opera no support, Safari no support, IE 6-11
    嵌入式 OpenType。这是唯一可以在IE8及以下版本中使用的字体，并且需要@font-face方式加载。

  • SVG font: Chrome 4-37, Firefox no support, Opera 10-24, Safari 3.2-14, IE/Edge no support
    可缩放矢量图形字体。 SVG 字体是未压缩的，唯一可以在 version 4.1 and below of Safari for iOS (iPhone, iPad) 中使用的字体。

建议

  • 1, 如果不需要支持 IE，可以使用 WOFF2 来支持所有主流浏览器
  • 或者 2, 使用 WOFF 来支持所有主流浏览器和 IE 9及以上, Edge 12及以上
  • 或者 3, 同时使用 WOFF2 和 TTF 来支持所有主流浏览器和 IE 8及以上
    所有1、2、3都需要这样的HTML代码：<i class="ifc-icon icon_name"></i>
  • 或者 4, 同时使用 WOFF2 和 TTF 和不同的 CSS 代码来支持IE6-7，和所有主流浏览器和 IE 8及以上。因为从IE8开始支持 '.css_class_name:before (注意不是两个冒号){ content: "" } CSS 代码。所以IE6-7需要不同CSS代码：<i class="icon ifc-icon">&#x66;(icons code)</i>

联系

缺陷报告、问题和建议：Issue tracker

贡献

如何添加一个新的精彩的 svg 图标项目？

如果您有一个 svg 图标项目想和其他人分享，我会非常乐意的添加它们。请联系我。

如果您想为您的本地开发添加，则可以这样做：

  • 1.下载或克隆此项目 https://github.com/uuware/icons-font-customization.git
    1. 根据您的项目名称在 /dist/svgs 下创建一个新文件夹。例如，这里我们称之为 new-project，所以新文件夹应该是 /dist/svgs/new project。
    1. 添加一个描述项目信息的 json 文件和一个许可文件。（请在 /dist/svgs/ 下的其他文件夹中确认json文件结构）
    1. 添加子文件夹（svgs或其他内容）并将您的图标复制到 /dist/svgs/new-project/svgs。
    1. 运行 "icons-font-command --maintain" 命令优化 svg 并创建演示页面。
    1. 然后，您可以像其他图标一样使用新的svg图标。

许可证

  • 所有代码（除 svg 、字体外的所有文件）均在 CC0-1.0 许可证下分发。
  • 所有 svg 和字体都在其原始许可证下分发。
    请参阅/dist/svgs下各个文件夹中包含的许可证和链接的信息。此信息也包含在生成的css文件中。
    所有包含的商标、品牌和/或名称都是其各自所有者的财产。

已知问题：

  • 1, 如果 svg 有 fill-rule="evenodd" 则可能不能正确显示。
    当前如果 svg 有 fill-rule="evenodd" 则生成字体时，它们可能会丢失一些形状。还没有好的简单解决方案，所以如果有的图标不满足您的要求，请跳过它们。
  • 2, 有些图标是重复的。

捐赠

主要贡献属于创造这些精灵的精英们。请鼓励并奖励他们一杯咖啡！

Readme

Keywords

Package Sidebar

Install

npm i icons-font-customization

Repository

github.com/uuware/icons-font-customization

Homepage

github.com/uuware/icons-font-customization#readme

Weekly Downloads

10

Version

1.2.1

License

Creative Commons Zero v1.0 Universal

Unpacked Size

28 MB

Total Files

32556

Last publish

Collaborators

  • uuware
Try on RunKit
Report malware