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 28 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
Socket's threat research team has detected five malicious npm packages targeting Roblox developers, deploying malware to steal credentials and personal data.
Security News
vlt introduced its new package manager and a serverless registry this week, innovating in a space where npm has stagnated.
Security News
Research
The Socket Research Team uncovered a malicious Python package typosquatting the popular 'fabric' SSH library, silently exfiltrating AWS credentials from unsuspecting developers.