open-index/open-npm huggingface dataset:
npm package: @makerdao/dai-ui-icons
Description: > TODO: description
Author: Adrian le Bas
Latest version: 0.0.66

# 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

1.  Install the icons package.

`yarn add @makerdao/dai-ui-icons`

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

```js
// 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>
);
```

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

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

<Icon name="dai_round_color" />;
```

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

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

[theme-ui]: https://github.com/system-ui/theme-ui
[dai-ui design system]: https://github.com/makerdao/dai-ui

## 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.

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

`yarn build`

2. Publish the packaging to the yalc registry.

`yalc publish`

3. Use sane to monitor the files for changes.

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

4. 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

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

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

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

```js
// example icons package
export const icons {
  my_icon: {
    path: (<path fill="currentColor" />),
    viewBox: "0 0 24 24",
  },
};
```
npm package: @makerdao/dai-ui-icons-branding
Description: > TODO: description
Author: Adrian le Bas
Latest version: 0.0.66

# 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.

To use the icons you must have the `Icon` component imported in your project from the `@makerdao/dai-ui-icons` package. See more info on how to use the `Icon` component [here].

## Getting Started

1.  Install the branding icons package.

`yarn add @makerdao/dai-ui-icons-branding`

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

```js
// app.js
import { ThemeProvider } from "theme-ui";
import theme from "./theme";
import { icons as standardIcons } from "@makerdao/dai-ui-icons";
import { icons as brandingIcons } from "@makerdao/dai-ui-icons-branding";

const icons = { ...standardIcons, ...brandIcons };

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

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

[theme-ui]: https://github.com/system-ui/theme-ui
[dai-ui design system]: https://github.com/makerdao/dai-ui
[here]: https://github.com/makerdao/dai-ui/tree/master/packages/dai-ui-icons#getting-started

## Setting Up a Local Dev Environment

While developing a new icons package, you can link it to your frontend project with `yarn link`.

1. In the icons package directory, build the package with the "watch" option. This will watch your source files and rebuild on any change.

`yarn build:watch`

2. In a new terminal window, navigate to the `dist` folder created by microbundle and set up the link.

`yarn link`

3. Navigate to your frontend project and complete the link.

`yarn link "@makerdao/dai-ui-icons-branding"`

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

To break the link run `yarn unlink "@makerdao/dai-ui-icons-branding"` in your frontend project, and reinstall the package from npm.
npm package: @makerdao/dai-ui-theme-casual
Description: Dai UI Casual Theme
Author: Adrian le Bas
Latest version: 0.0.66

# Dai-UI Maker Theme

## Getting Started

1. Install [theme-ui][]

`yarn add theme-ui`

2.  Install our [default theme][]

`yarn add @makerdao/dai-ui-theme-maker`

3.  Or create your own

```js
// theme.js
export default {
  sizes: [0, 4, 8, 16, 32],
  colors: {
    primary: "#1AAB9B",
    secondary: "#F4B731",
  },
  // ...add your design tokens here
};
```

4. Import the theme provider from theme-ui and wrap your app, passing the theme object as prop to the provider.

```js
// app.js
import React from "react";
import { ThemeProvider } from "theme-ui";
import theme from "./theme";

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

5. Use the component primitives provided by theme-ui to build your frontend.

```js
// Form.js
<Card>
  <Box>
    <Label>Ethereum Address</Label>
    <Input defaultValue="Default Text"></Input>
    <Button>Submit</Button>
  </Box>
</Card>
```

6. See our [recipes page][] for more examples and inspiration!

[recipes page]: https://design-system.mkr-js-prod.now.sh/recipes
[theme-ui]: https://github.com/system-ui/theme-ui
[default theme]: https://github.com/makerdao/dai-ui/blob/initial-documentation/packages/dai-ui-theme-maker/lib/index.js

## Setting Up a Local Dev Environment

While developing a new theme, you can link it to your frontend project with `yarn link`.

1. In the theme directory, build the package with the "watch" option.

`yarn build:watch`

2. In a new terminal window navigate to the `dist` folder and set up the link.

`yarn link`

3. Navigate to your frontend project and complete the link. In this example we'll use the maker default theme.

`yarn link "@makerdao/dai-ui-theme-maker"`

You should now see updates to your theme file take effect immediately in your frontend project as you develop your theme.

To break the link run `yarn unlink "@makerdao/dai-ui-theme-maker"` in your frontend project, and reinstall the package from npm.
npm package: @makerdao/dai-ui-theme-fountain
Description: Dai UI Fountain Theme
Author: Adrian le Bas
Latest version: 0.0.28

# Dai-UI Fountain Theme

## Setting Up a Local Dev Environment

While developing a new theme, you can link it to your frontend project with `yarn link`.

1. In the theme directory, build the package with the "watch" option.

`yarn build:watch`

2. In a new terminal window navigate to the `dist` folder and set up the link.

`yarn link`

3. Navigate to your frontend project and complete the link. In this example we'll use the fountain theme.

`yarn link "@makerdao/dai-ui-theme-fountain"`

You should now see updates to your theme file take effect immediately in your frontend project as you develop your theme.

To break the link run `yarn unlink "@makerdao/dai-ui-theme-fountain"` in your frontend project, and reinstall the package from npm.
npm package: @makerdao/dai-ui-theme-pen
Description: Dai UI Pen Theme
Author: Adrian le Bas
Latest version: 0.0.66

# Dai-UI Pen Theme

## Setting Up a Local Dev Environment

While developing a new theme, you can link it to your frontend project with `yarn link`.

1. In the theme directory, build the package with the "watch" option.

`yarn build:watch`

2. In a new terminal window navigate to the `dist` folder and set up the link.

`yarn link`

3. Navigate to your frontend project and complete the link. In this example we'll use the pen theme.

`yarn link "@makerdao/dai-ui-theme-pen"`

You should now see updates to your theme file take effect immediately in your frontend project as you develop your theme.

To break the link run `yarn unlink "@makerdao/dai-ui-theme-pen"` in your frontend project, and reinstall the package from npm.