@mekari/mekari-ui-vue/src/components/Icon/stories/content/DefaultIconGuideline.mdx

--- General web components in Mekari. The components are made using vue.js as its framework. Styling of components on Mekari UI Vue uses [Mekari UI Toolkit](https://bitbucket.org/mid-kelola-indonesia/mekari-ui-toolkit/src/master/). Don't forget to import

import iconExampleSmall from '../assets/img/icon-example-sm.png';
import iconExampleRegular from '../assets/img/icon-example-rg.png';
import iconExampleMedium from '../assets/img/icon-example-md.png';
import iconExampleLarge from '../assets/img/icon-example-lg.png';

Default Icon can be divided more into three sizes:
- Small
- Regular
- Medium
- Large

<div className="row col-12 p-0 mb-4">
  <div className="col-4 p-0">
    <h4>Small Icon (20px)</h4>
    <p>
      Designed on 16 x 16 and exported with padding on a 20px bounding box. <strong>Commonly used in form element (input, select, alert, etc)</strong>.
    </p>
  </div>
  <div className="col-8 text-center">
    <img src={iconExampleSmall} />
  </div>
</div>
<div className="row col-12 p-0 mb-4">
  <div className="col-4 p-0">
    <h4>Regular Icon (24px)</h4>
    <p>
      Designed on 20 x 20 and exported with padding on a 24px bounding box.<strong>Designed on 20 x 20 and exported with padding on a 24px bounding box</strong>.
    </p>
  </div>
  <div className="col-8 text-center">
    <img src={iconExampleRegular} />
  </div>
</div>
<div className="row col-12 p-0 mb-4">
  <div className="col-4 p-0">
    <h4>Medium Icon (32px)</h4>
    <p>
      Designed on 28 x 28px and exported with padding on a 32px bounding box. Used in <strong>highlighted cards, steps, message, etc</strong>.
    </p>
  </div>
  <div className="col-8 text-center">
    <img src={iconExampleMedium} />
  </div>
</div>
<div className="row col-12 p-0 mb-4">
  <div className="col-4 p-0">
    <h4>Large Icon (60px)</h4>
    <p>
      Icons should be designed on 56 x 56px and exported with padding on a 60px bounding box. Used in <strong>brand value delivering, marketing purpose (email, tour guide, etc)</strong>.
    </p>
  </div>
  <div className="col-8 text-center">
    <img src={iconExampleLarge} />
  </div>
</div>