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" }} />
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",
},
};