icon-blender

    1.0.0-beta.4 • Public • Published

    Icon Blender

    Create customized SVG icon collections from over 80,000 free and open-source icons

    Test Results

    Features

    • Include only the icons you need
      Custom icon bundles means smaller transfer sizes and faster page loading
    • Use icons from multiple packages
      Adding icons from another icon package doesn't require including entire packages
    • SVG in CSS
      Icons vectors are embedded directly in your CSS files eliminating the need for additional font files
    • No font files
      Eliminating font files means one less server request before your pages load and solves the "Ensure text remains visible during webfont load" issue on PageSpeed Insights
    • Seamless integration with SCSS/Less.js workflow
      No additional software to install or configure

    Usage

    SCSS

    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>

    Less.js

    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>

    CSS

    Not using SCSS? You can still use IconBlender by selecting icons and generating CSS on icon-blender.com

    Styling

    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

    Custom Class Names

    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);
    }

    Available Icon Packages

    Icon definitions from Iconfy

    Package Name Prefix Icons
    Akar Icons akar-icons 242
    Ant Design Icons ant-design 1828
    Bootstrap Icons bi 1333
    BPMN bpmn 112
    Brandico Font brandico 45
    BoxIcons bx 1500
    Bytesize Icons bytesize 102
    Carbon carbon 1584
    CoreUI Brands cib 831
    CoreUI Flags cif 199
    CoreUI Free cil 562
    Clarity clarity 1085
    Codicons codicon 349
    Cryptocurrency Icons cryptocurrency 452
    Dashicons dashicons 347
    Evil Icons ei 70
    Elusive Icons el 304
    Emoji One (Colored) emojione 2159
    Emoji One (Monotone) emojione-monotone 1713
    Emoji One (v1) emojione-v1 1529
    Entypo+ entypo 321
    Entypo+ Social entypo-social 76
    Elegant et 100
    Eva Icons eva 490
    Font Awesome 4 fa 786
    Font Awesome 5 Brands fa-brands 461
    Font Awesome 5 Regular fa-regular 151
    Font Awesome 5 Solid fa-solid 1024
    Feather Icon fe 255
    Feather Icons feather 286
    File Icons file-icons 918
    Flat Color Icons flat-color-icons 329
    Flat UI Icons flat-ui 100
    Fluent UI System Icons fluent 6994
    Fontelico fontelico 34
    Foundation foundation 283
    Firefox OS Emoji fxemoji 1034
    GeoGlyphs geo 30
    css.gg gg 704
    Gridicons gridicons 201
    Grommet Icons grommet-icons 611
    HeroIcons Outline heroicons-outline 226
    HeroIcons Solid heroicons-solid 226
    Google Material Icons ic 10009
    IcoMoon Free icomoon-free 491
    Icons8 Windows 10 Icons icons8 234
    Icalicons il 84
    IonIcons ion 2582
    Innowatio Font iwwa 105
    Jam Icons jam 940
    Line Awesome la 2353
    Material Line Icons line-md 250
    SVG Logos logos 1397
    Ligature Symbols ls 348
    Majesticons majesticons 420
    Maki maki 388
    Map Icons map 167
    Material Design Icons mdi 10639
    Material Design Light mdi-light 267
    Medical Icons medical-icon 144
    Mono Icons mi 147
    Noto Emoji noto 3678
    Noto Emoji (v1) noto-v1 2320
    Octicons octicon 604
    Open Iconic oi 223
    OpenMoji openmoji 3954
    Phosphor ph 4668
    Pixelarticons pixelarticons 460
    PrestaShop Icons ps 479
    Radix Icons radix-icons 310
    Raphael raphael 266
    Remix Icon ri 2271
    SmartIcons Glyph si-glyph 800
    Simple Icons simple-icons 1914
    Simple line icons simple-line-icons 189
    Subway Icon Set subway 308
    System UIcons system-uicons 422
    Tabler Icons tabler 1276
    Teenyicons teenyicons 1200
    TopCoat Icons topcoat 89
    Twitter Emoji twemoji 3823
    Typicons typcn 336
    Unicons uil 1236
    Unicons Monochrome uim 296
    Vaadin Icons vaadin 636
    Vesper Icons vs 172
    VSCode Icons vscode-icons 1070
    Web Symbols Liga websymbol 85
    WebHostingHub Glyphs whh 2125
    Weather Icons wi 599
    Icons8 Windows 8 Icons wpf 294
    Material Design Iconic Font zmdi 886
    Zondicons zondicons 297

    Contributing

    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

    Dependents (1)

    Install

    npm i icon-blender

    DownloadsWeekly Downloads

    193

    Version

    1.0.0-beta.4

    License

    TBD

    Unpacked Size

    290 MB

    Total Files

    214

    Last publish

    Collaborators

    • oyejorge