@makerdao/dai-ui-icons

Dai-UI Icons

Note: this package is for use with the Dai-UI Design System and assumes this has already been set up in your project.

Getting Started

• Install the icons package.

yarn add @makerdao/dai-ui-icons

• Import the icons in the same file where you import your theme, and merge the icons with your theme.

// app.js
import { ThemeProvider } from 'theme-ui';
import theme from './theme';
import { icons } from '@makerdao/dai-ui-icons';

const mergedTheme = { ...theme, icons };

export default (props) => (
  <ThemeProvider theme={mergedTheme}>{props.children}</ThemeProvider>
);

• Import the Icon component into your project. Pass the name of the desired icon as a prop to the icon component.

// index.js
import { Icon } from '@makerdao/dai-ui-icons';

<Icon name="dai_round_color" />;

• Icons can also accept color and size props pulled from your theme, as well as theme-ui sx properties.

<Icon name="maker" color="primary" size={3} sx={{ bg: 'secondary' }} />

Setting Up a Local Dev Environment

While developing a new icons package, you can link it to your frontend project using yalc and monitor for changes with sane.

• In the icons package directory, first build the package.

yarn build

• Publish the packaging to the yalc registry.

yalc publish

• Use sane to monitor the files for changes.

sane "yalc publish --push" . --wait=10

• Navigate to your frontend project and add the package with yalc.

yalc add "@makerdao/dai-ui-icons"

You should now see updates to your icons package take effect immediately in your frontend project.

To remove the linked package run yalc remove "@makerdao/dai-ui-icons" and reinstall the package from npm.

Creating an Icons Package

• Your package must export an icons object where each icon is keyed by its name, with path and viewBox keys nested inside.

• The path must return a valid svg <path> element as JSX, since it will be wrapped in an <svg> element by the Icon component.

• Change the fill attribute to "currentColor" so you can set the color with the color prop on the Icon component.

// example icons package
export const icons {
  my_icon: {
    path: (<path fill="currentColor" />),
    viewBox: "0 0 24 24",
  },
};