Nielsen Icons

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

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