Icon

Summary

The Icon component is based on the Material Symbols icons. It includes all the icons with the weight of 300.

Requirements

• Node 16

Installation

Install the Icon package on your project, with the following command:

npm i @bolttech/atoms-icon@version

After installing the package, it should come with the @material-symbols/font-300 as a peerDependencie. Check if it was correctly installed on your project and if not, please install it running:

npm i @material-symbols/font-300@version

Configuration

To correctly see your icons, you need to import the styles on your project main file, for an exemple, on a Next.js project, you should import it on your _app.tsx, or, if using Create React App, you can add it on your App.js.

Next.js example:

// _app.tsx

import type { AppProps } from 'next/app';
import type { NextPage } from 'next';

import '@material-symbols/font-300/sharp.css'; // add this line

export default function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}

Create React App example:

// App.js

import React from 'react';

import '@material-symbols/font-300/sharp.css'; // add this line

const App = () => <h1>Hello-world</h1>;

export default App;

How to use

After the basic configuration, you are ready to use the Icon component on your project. Be sure to provide a valid name of an symbol available on the Material Symbols list.

Example

import { Icon } from '@bolttech/atoms-icon';

export default function Component() {
  return (
    <Icon
      id="id"
      dataTestId="date-test-id"
      icon="credit_card"
      color="red"
      fill={false}
      size={24}
    />
  );
}

Running unit tests

Run nx test atoms-icon to execute the unit tests via Jest.