metacomic-icons

Installation

npm install @metacomic/icons --save

import '@metacomic/icons/fonts/metacomic.css'

import CSS to your main.js

Use

Add icon with class name, class name rule: mc-{name}-{style}

<i class="mc-admin-line"></i>
<i class="mc-admin-fill"></i>

Note: You can go to metacomic.com to check the name of the icons. -line means the outlined style icon, and -fill means the filled style icon.

Sizing

metacomic can be resized by css class integrated by metacomic.css . Icons inherit the font-size of their parent container and with the following classes you can increase or decrease the size of icons relative to that inherited font-size. You can also use mc-fw class for a fixed width for icons. For example:

<div style="font-size: 24px;">
  <i class="mc-admin-line mc-fw"></i> <!-- fixed width -->
  <i class="mc-admin-line mc-xxs"></i> <!-- 0.5em -->
  <i class="mc-admin-line mc-xs"></i> <!-- 0.75em -->
  <i class="mc-admin-line mc-sm"></i> <!-- 0.875em -->
  <i class="mc-admin-line mc-1x"></i> <!-- 1em -->
  <i class="mc-admin-line mc-lg"></i> <!-- 1.3333em -->
  <i class="mc-admin-line mc-xl"></i> <!-- 1.5em -->
  <i class="mc-admin-line mc-2x"></i> <!-- 2em -->
  <i class="mc-admin-line mc-3x"></i> <!-- 3em -->
  ...
  <i class="mc-admin-line mc-10x"></i> <!-- 10em -->
</div>

You can check the metacomic.css file for more info and details.