Natura Design System - Icons

Before you start...

Are already using the @naturacosmeticos/natds-web library?

You don't need to install this library directly.

How to install

You can still use this package by installing it directly into your project with:

# with npm
npm install --save @naturacosmeticos/natds-icons

# with yarn
yarn add @naturacosmeticos/natds-icons

How to use

You can import fonts and the generated CSS and JSON files like this:

import {
  iconNames, // the .json
  iconStyles, // the .css
  NatdsIconsEot,
  NatdsIconsSvg,
  NatdsIconsTtf,
  NatdsIconsWoff,
  NatdsIconsWoff2
} from '@naturacosmeticos/natds-icons';

For use on web environments, you will need to serve the fonts and consume the CSS file as you see fit.

One possible way to use it on React is creating a simple (JSX) component like this:

import React from "react"
import '@naturacosmeticos/natds-icons/dist/natds-icons.css';
import { iconNames } from '@naturacosmeticos/natds-icons';

const Icon = (props) => (
  <i className={`natds-icons-${props.name}`} />
);

You can also import the JSON file that contains the relationships between the icon names and their unicode counterparts (don't rely on the unicodes, they are generated automatically)

import {
  NatdsIconsTtf,
  iconNames
} from '@naturacosmeticos/natds-icons';

How to contribute

To contribute, please check our Contributing guidelines.