Install

$ npm install --save @atomicjolt/atomic-elements

$ yarn add @atomicjolt/atomic-elements

Setup

At the root of your application, you should include the following components:

import { ElementsProvider } from "@atomicjolt/atomic-elements";

const App = () => (
  <ElementsProvider>
    <YourApp />
  </ElementsProvider>
);

ElementsProvider

The ElementsProvider component is a context provider that makes the theme available to all components in the tree. It also provides a way to override the default theme.

Fonts

Atomic Elements makes use of the following Fonts by default:

• Lato (Text Font)
• Material Icons (For the MaterialIcon component & any other components that make use of an icon)
• Material Symbols (Only needed if you want to use the MaterialSybmol component)

Loading Fonts

You can load the fonts from anywhere, but here is an example of how you might load them from Google Fonts.

<!-- Lato is the default text font, you should only need these variants.
You could load a different text-font if you wanted -->
<link
  href="https://fonts.googleapis.com/css2?family=Lato:wght@200;400;700&display=swap"
  rel="stylesheet"
/>

<!-- Material Icons -->
<link
  href="https://fonts.googleapis.com/icon?family=Material+Icons"
  rel="stylesheet"
/>

<!-- The default is filled, you only need any of these if you actually intend to use them -->
<link
  href="https://fonts.googleapis.com/icon?family=Material+Icons%7CMaterial+Icons+Outlined"
  rel="stylesheet"
/>
<link
  href="https://fonts.googleapis.com/icon?family=Material+Icons%7CMaterial+Icons+Round"
  rel="stylesheet"
/>
<link
  href="https://fonts.googleapis.com/icon?family=Material+Icons%7CMaterial+Icons+Sharp"
  rel="stylesheet"
/>
<link
  href="https://fonts.googleapis.com/icon?family=Material+Icons%7CMaterial+Icons+Two+Tone"
  rel="stylesheet"
/>