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
- Run
npm install
.
To update the icon libraries:
- 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).
- Add icons to
src
directory. - Update the version in the root
package.json
using Semantic Versioning. - Rebuild the icon libraries:
npm run build
. - Republish the module.
To run the built-in Storybook environment to explore the React-flavored icon library and test in situ:
- Run
npm run storybook
. - Open a browser to
http://localhost:6006
. - 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