mt-roberto / mt-web-icons

mt-web-icons

Prerequisites

You have Node installed at v10.0.0+ and Yarn at v1.2.0+. You are familiar with Git.

Steps for updating the web font

1. Go to https://icomoon.io/app/#/select
2. Upload the latest selection.json in the iconmoon folder
3. In the iconmoon web app, just upload whatever svg you want to add. Be sure to center it and name it properly.
4. Generate the new web font
5. Download it
6. Unzip it
7. Copy the whole unzipped folder to update this repository

Create svgs and build components

Run the following command before:

yarn build

How to use it

Icon component with icon name:

import React from 'react';
import { ReactElement } from 'react';
const Icon = 'mt-web-icons';

export default function IconAuto(): ReactElement {
  return <Icon name="auto" width={100} height={100} fill="#ffffff" />;
}

Icon with defined placeholder and fallback for suspence:

import React from 'react';
import { ReactElement } from 'react';
const Icon = 'mt-web-icons';

export default function IconAuto(): ReactElement {
  return <Icon name="Auto" placeholder={null} fallback={<div />} />;
}

Specific Icon:

import React from 'react';
import { ReactElement } from 'react';
import { Auto } from 'mt-web-icons';

export default function Icon(): ReactElement {
  return <Auto width={100} height={100} fill="#ffffff" />;
}