icon-scss-mixins-witblog

    1.0.4 • Public • Published

    WIT Icon Mixins(SCSS)

    Collection of SCSS icon mixins. See blog article

    SAMPLE

    ICON Mixin Lists

    ICON not required parent DOM

    • X ICON
    • Triangle ICON
    • Angle ICON
    • Arrow ICON

    HTML example :

    <i role="img" class="icon_cancel" aria-label="cancel icon"></i>
    

    ICON required parent DOM

    • Menu ICON
    • More ICON

    HTML example :

    <button type="button" class="button_menu" aria-label="menu">
        <i class="icon_menu"></i>
    </button>
    

    SCSS Mixin File

    If you don't need to change icon's css property values, import the following files.

    • Basic Sample :
    @import "[path]/icons_basic";
    
    • If your css file includes *, *:before, *:after { box-sizing: border-box } code :
    @import "[path]/icons_basic_ver_border_box";
    

    If you want icons to change icon's size or color, import the following files.

    • Basic Sample :
    @import "[path]/icons_default";
    @import "[path]/icons_for_change_size";
    @import "[path]/icons_for_change_color";
    
    • If your css file includes *, *:before, *:after { box-sizing: border-box } code :
    @import "[path]/icons_default_ver_border_box";
    @import "[path]/icons_for_change_size";
    @import "[path]/icons_for_change_color";
    

    INSTALLATION

    You can install it via npm:

    npm install --save-dev icon-scss-mixins-witblog
    

    Then, add the following code to your scss file.

    @import '../../node_modules/icon-scss-mixins-witblog/mixins/[scss mixin file name]'
    

    LICENSE

    LICENSE MIT See LICENSE.md

    CHANGELOG

    See releases

    Install

    npm i icon-scss-mixins-witblog

    DownloadsWeekly Downloads

    1

    Version

    1.0.4

    License

    MIT

    Last publish

    Collaborators

    • witblog