icon blender

icon blender

从80,000多个免费和开源图标中创建自定义的SVG图标集合

特征

• 仅包括您需要的图标
  自定义图标束意味着较小的传输尺寸和更快的页面加载
• 使用来自多个软件包的图标
  添加另一个图标软件包中的图标不需要包含整个软件包
• CSS中的SVG
  图标向量直接嵌入您的CSS文件中，消除了对其他字体文件的需求
• 没有字体文件
  消除字体文件意味着在您的页面加载页面之前，较少的服务器请求并求解“确保在WebFont加载期间保持文本可见”问题上的问题上的问题。
• 与SCSS/LINS.JS工作流程无缝集成
  没有安装或配置的其他软件

用法

SCSS

示例.scss

 @import \" icon-blender/scss/icon-blender.scss \" ; // import default variables, mixins and core styles
@import \" icon-blender/scss/icons/fa.scss \" ; // import the FontAwesome4 collection ($icons-fa)
@include icon ( $icons-fa , \' search \' ); // include the \'search\' icon from the FontAwesome4 collection

示例.html

 < i class =\" ib fa-search \" > </ i >

少

例子

 @import \" icon-blender/less/icon-blender.less \" ; // import default variables, mixins and core styles
@import \" icon-blender/less/icons/fa.less \" ; // import the FontAwesome4 collection ($icons-fa)
.ib .icon ( @icons-fa , search); // include the \'search\' icon from the FontAwesome4 collection

示例.html

 < i class =\" ib fa-search \" > </ i >

CSS

不使用SCSS？您仍然可以通过在Icon-Blender.com上选择图标并生成CSS来使用IconBlender

造型

IconBlender带有标准量表（IB-2X ..），旋转（IB-Rotate-90 …，Flip（Ib-Flip-vertical …）和动画（IP-Spin）类。请参阅https：//icon-blender.com/docs，请参见示例

自定义类名称

使用icon() MIXIN时，生成的类名称将采用表单.#{$collection-prefix}-#{$icon-name} 。如果您希望替代类名称，则可以使用iconUrl() mixin。

示例.scss

 @import \" icon-blender/scss/icon-blender.scss \" ; // import default variables, mixins and core styles
@import \" icon-blender/scss/icons/fa.scss \" ; // import the FontAwesome4 collection ($icons-fa)

.my-class-name {
	@include iconUrl ( $icons-fa , \' search \' );
}

例子

 @import \" icon-blender/less/icon-blender.less \" ; // import default variables, mixins and core styles
@import \" icon-blender/less/icons/fa.less \" ; // import the FontAwesome4 collection ($icons-fa)

.my-class-name {
	.ib .iconUrl ( @icons-fa ,search);
}

可用的图标软件包

图标定义来自Iconfy

贡献

安装构建和测试所需的依赖项：

$ npm install

运行测试

$ npm test

创建SCSS/ ICON/ .SCSS和少/图标/ 。

$ npm run build

构建CSS/ICON-BLENDER.CSS

$ npm run build:css