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 also accept
color
and size
props that are integrated with your theme, as well as theme-ui sx
properties.
<Icon name="maker" color="primary" size={3} sx={{ bg: "secondary" }} />
Creating an Icons Package
-
Your icons package must export an object with a name
key with path
and viewBox
keys nested inside.
-
The path
must return a valid svg path 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 default {
my_icon: {
path: <path fill="currentColor" />,
viewBox: "0 0 24 24",
},
};