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.
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.
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.
export const icons {
my_icon: {
path: (<path fill="currentColor" />),
viewBox: "0 0 24 24",
},
};