icon-blender
Advanced tools
Create customized SVG icon collections from over 80,000 free and open-source icons
Create customized SVG icon collections from over 80,000 free and open-source icons
example.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
example.html
<i class="ib fa-search"></i>
example.less
@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
example.html
<i class="ib fa-search"></i>
Not using SCSS? You can still use IconBlender by selecting icons and generating CSS on icon-blender.com
IconBlender comes with standard scale (ib-2x..), rotate (ib-rotate-90..., flip (ib-flip-vertical...), and animation (ip-spin) classes. See examples at https://icon-blender.com/docs
When using the icon() mixin, generated class names will take the form .#{$collection-prefix}-#{$icon-name}.
If you'd prefer alternate class names, you can use the iconUrl() mixin instead.
example.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');
}
example.less
@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);
}
Icon definitions from Iconfy
Install the dependencies that are required to build and test:
$ npm install
Run tests
$ npm test
Create scss/icon/.scss and less/icon/.less files from json
$ npm run build
Build css/icon-blender.css
$ npm run build:css
FAQs
Create customized SVG icon collections from over 80,000 free and open-source icons
The npm package icon-blender receives a total of 43 weekly downloads. As such, icon-blender popularity was classified as not popular.
We found that icon-blender demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
Security News
React's CRA deprecation announcement sparked community criticism over framework recommendations, leading to quick updates acknowledging build tools like Vite as valid alternatives.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.