Ninja Pumpkin Mutants

    postcss-icon-blender

    1.0.0-Beta.3 • Public • Published

    PostCSS Icon Blender

    PostCSS plugin for creating customized SVG icon collections from over 80,000 free and open-source icons.

    Test Results

    Usage

    Before

    @icon fa align-left;

    After

    .fa-align-left{
    	--url: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1792 1408"%3e%3cpath d="M1792 1216v128q0 26-19 45t-45 19H64q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1664q26 0 45 19t19 45zm-384-384v128q0 26-19 45t-45 19H64q-26 0-45-19T0 960V832q0-26 19-45t45-19h1280q26 0 45 19t19 45zm256-384v128q0 26-19 45t-45 19H64q-26 0-45-19T0 576V448q0-26 19-45t45-19h1536q26 0 45 19t19 45zM1280 64v128q0 26-19 45t-45 19H64q-26 0-45-19T0 192V64q0-26 19-45T64 0h1152q26 0 45 19t19 45z" fill="currentColor"/%3e%3c/svg%3e');
    }

    Add the icon to your html anywhere using:

    <i class="ib fa-align-left"></i>

    Important don't forget to include or import icon-blender.css.

    Custom Class Names

    When using the @icon rule, generated class names will take the form .ib-{collection_prefix}-{icon_name}. If you'd prefer alternate class names, you can use the @iconUrl rule instead.

    Before

    .my-class-name{
    	@iconUrl fa align-left;
    }

    After

    .my-class-name{
    	--url: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1792 1408"%3e%3cpath d="M1792 1216v128q0 26-19 45t-45 19H64q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1664q26 0 45 19t19 45zm-384-384v128q0 26-19 45t-45 19H64q-26 0-45-19T0 960V832q0-26 19-45t45-19h1280q26 0 45 19t19 45zm256-384v128q0 26-19 45t-45 19H64q-26 0-45-19T0 576V448q0-26 19-45t45-19h1536q26 0 45 19t19 45zM1280 64v128q0 26-19 45t-45 19H64q-26 0-45-19T0 192V64q0-26 19-45T64 0h1152q26 0 45 19t19 45z" fill="currentColor"/%3e%3c/svg%3e');
    }

    PostCSS Setup

    Step 1: Install plugin:

    npm install --save-dev postcss postcss-icon-blender

    Step 2: Check you project for existed PostCSS config: postcss.config.js in the project root, "postcss" section in package.json or postcss in bundle config.

    If you do not use PostCSS, add it according to official docs and set this plugin in settings.

    Step 3: Add the plugin to plugins list:

    module.exports = {
      plugins: [
    +   require('postcss-icon-blender'),
        require('autoprefixer')
      ]
    }

    Install

    npm i postcss-icon-blender

    DownloadsWeekly Downloads

    1

    Version

    1.0.0-Beta.3

    License

    MIT

    Unpacked Size

    253 kB

    Total Files

    9

    Last publish

    Collaborators

    • oyejorge