icon-scss-mixins-witblog

WIT Icon Mixins(SCSS)

Collection of SCSS icon mixins. See blog article

SAMPLE

• Basic Sample
  • https://ntswitblog.github.io/icon-scss-mixins-witblog/sample/sample.html
• If your css file includes *, *:before, *:after { box-sizing: border-box } code (ex. bootstrap.css), refer to this sample.
  • https://ntswitblog.github.io/icon-scss-mixins-witblog/sample/sample_ver_border_box.html

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