How to

Download the JavaScript script file from the top right corner of the Icon list page and include it in your file

<script src="/icon_plus_icon_script.js" type="text/javascript" />

Using as SVG

<svg style={style} className={`mf-icon ${className}`}>
  <use xlinkHref={`#${name}`} />
</svg>

Using Custom Components

Custom Component

'use client';
import React from 'react';

type IconProps = {
  name: "mf-alert" | "mf-copy";
  style?: React.CSSProperties;
  className?: string;
  onClick?: (e?: any) => void;
};

const Icon = (props: IconProps): JSX.Element => {
  const { name, style = {}, className = '', onClick = () => {} } = props;

  return (
    <svg style={style} className={`mf-icon ${className}`} onClick={onClick}>
      <use xlinkHref={`#${name}`} />
    </svg>
  );
};

export default Icon;

Usage

import Icon from '/src/components/ui/icon';
<Icon name={"mf-copy"} />

Using theNPMPackage

npm install @magicfuture/mf --save-dev

Create a .mfrc file in your project root directory
```
{
  key: '',
  component_dir: '/src/components/ui',
  script_dir: '/public',
}
```
key: Secret Key
component_dir: Directory for Icon components, e.g., @/components/ui/icon
script_dir: Directory for JavaScript scripts, e.g., /public
Add the following command to your package.json scripts
```
"mf": "mf download"
```
Run the command
```
npm run mf
```