open-index/open-npm huggingface dataset:
npm package: @rhiza/nielsen-icons
Description: Nielsen's icon library, implented as web-friendly SVGs, React components, and ES modules.
Latest version: 0.0.1

# Nielsen Icons

Nielsen's icon library, implented as web-friendly SVGs, React components, and ES modules.

![](screenshot.png)

## Usage Examples

### Vanilla SVG
```
<img src="src/Research%20-%20Resonance.svg" alt="Research - Resonance" />
```

### React

React components accept optional color variants as `base` and `accent` props.

```
import IconResearchResonance from 'react-icons/research-resonance'

function App() {
  return (
    <div className="App">
      <IconResearchResonance base="#000000" accent="#2AACE2" / >
    </div>
  );
}
```

### ES Module
```
<div id="App"></div>

<script type="module">
  import * as module from "./module-icons/research-resonance.js";
  
  var icon = module.default;
  
  document.getElementById("App").innerHTML = `<svg height="${icon.metadata.height}" width="${icon.metadata.width}" ${icon.source} />)`
</script>
```

## Development

0. Run `npm install`.

To update the icon libraries:

1. Export icons from Illustrator as SVGs from the Assets panel (inline styling, convert fonts to outlines, preserve images, assign unique object IDs, 2 decimal points, do not minify, non-responsive).
2. Add icons to `src` directory.
3. Update the version in the root `package.json` using [Semantic Versioning](https://semver.org/).
4. Rebuild the icon libraries: `npm run build`.
5. Republish the module.

To run the built-in Storybook environment to explore the React-flavored icon library and test _in situ_:

1. Run `npm run storybook`.
2. Open a browser to `http://localhost:6006`.
3. Check `./stories/index.stories.js` for how Storybook is loading the React components.

## Roadmap

- [TODO] Ingest the rest of the icon library from .ai file provided by Brand
- [TODO] Export optimized SVGs
- [TODO] Export ClojureScript modules