Icon
Summary
The Icon
component is based on the Material Symbols icons. It includes all the icons with the weight of 300.
Requirements
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:
import type { AppProps } from 'next/app';
import type { NextPage } from 'next';
import '@material-symbols/font-300/sharp.css';
export default function MyApp({ Component, pageProps }: AppProps) {
return <Component {...pageProps} />;
}
Create React App example:
import React from 'react';
import '@material-symbols/font-300/sharp.css';
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.