IDS Resource Library

This is a React friendly collection of SVG icons for use in the Smrt1 Health IDS Project. The package consists of 90 svg icons and 13 colors pre-bundled via webpack and has a size of about 260K.

Dependencies

This package has a peer dependency of react and react-dom version 18.

Install

In the project directory, you can run npm install idsreslib or yarn add idsreslib to add the resource library to your project.

Usage

The package provides the following exports:

$3

A key value object the keys are the names of the colors and the values are the hex color codes for example:

~~~
{
"Blue": "#0000FF"
}
~~~

Usage:

~~~
import {colors} from 'idsreslib';

function ColorTable() {
return Object.entries(colors).map(([color, colorCode]) =>
{color}
);
}
~~~

$3

A key value object where the keys are the icon names and the values are React Components wrap an svg icon.

Usage:

~~~
import {icons} from 'idsreslib';

function Icons({width, height}) {
return

{Object.values(icons).map(([Icon]) => )}

}
~~~

$3

A React Component that accepts an icon prop which is the string name for which icon to display.

Usage in a React Component:

~~~
import {IdsIcon} from 'idsreslib';

export default function AardvarkIcon({width, height}) {
return ;
}
~~~

$3

A function that you pass a language string then it returns a 2 dimensional array of colors with localized names.

~~~
[["Blue", "#0000FF", "Blue"]]
~~~

Usage:

~~~
import {localizedColors} from 'idsreslib';

function ColorTable() {
return localizedColors('fr').map(([colorKey, color, colorName]) =>
{colorName}
);
}
~~~

$3

A function that you pass a language string then it returns a 2 dimensional array of icons with localized names.

Usage:

~~~
import {localizedIcons} from 'idsreslib';

function Icons({width, height}) {
return

{localizedIcons(en).map(([iconKey, Icon, iconName]) => - {iconName})}

}
~~~

Full create-react-app Demo Code

Open up a terminal and run the following to test this out using create-react-app:

~~~
npx create-react-app myApp
cd myApp
npm install styled-components idsreslib
~~~

Then replace App.js and App.css with the contents below using your favourite IDE and run:

~~~
npm start
~~~

>App.js
~~~
import './App.css';
import {colors, icons, IdsIcon} from './idsreslib';
import styled from 'styled-components';

//Let's Add French names for the icons
const frenchIconNames = {Aardvark: 'Aardvark', Acorn: 'Bellota', Albatross: 'Albatros', Alligator: 'Alligator', Ant: 'Fourmi', Antelope: 'Antilope', Armadillo: 'Tatou roux', BagSeedling: 'Plántula de Bolsa', Bat: 'Chauve-souris', Bear: 'Ours', Beaver: 'Castor', Bee: 'Abeille', BenchTree: 'Árbol de banco', Binoculars: 'Prismáticos', Boar: 'Sanglier', Buffalo: 'Buffle', Bug: 'Bicho', Bugs: 'Insectos', Bull: 'Taureau', Butterfly: 'Papillon', Cactus: 'Cactus', Camel: 'Chameau', Cardinal: 'Cardinal', Cat: 'Chat', Chestnut: 'Castaña', CloudSun: 'Nube Sol', Clover: 'Trébol', Cougar: 'Cougar', Crow: 'Corbeau', Deer: 'Cerf', Dog: 'Chien', Dolphin: 'Dauphin', Dove: 'Colombe', Dragon: 'Dragon', Dragonfly: 'Libellule', Eagle: 'Aigle', Elephant: 'Éléphant', Elk: 'Elan', Feather: 'Pluma', FeatherPointed: 'Pluma Puntiaguda', Fire: 'Fuego', FireSmoke: 'Humo de Fuego', Fish: 'Poisson', Flamingo: 'Flamant rose', Flower: 'Flor', FlowerDaffodil: 'Flor Narciso', FlowerTulip: 'Flor Tulipán', Fox: 'Renard', Frog: 'Grenouille', Gazelle: 'Gazelle', Giraffe: 'Girafe', Goat: 'Chèvre', Goose: 'Oie', Grasshopper: 'Sauterelle', Heron: 'Héron', Hippopotamus: 'Hippopotame', Horse: 'Cheval', HouseTree: 'Árbol de la Casa', Hummingbird: 'Colibri', Icicles: 'Carámbanos', Jellyfish: 'Méduse', Kiwi: 'Kiwi', Koala: 'Koala', Ladybug: 'Coccinelle', Leaf: 'Hoja', LeafMaple: 'Hoja de Arce', LeafOak: 'Roble Hoja', Lion: 'Lion', Lizard: 'Lézard', Llama: 'Llama', Lobster: 'Homard', Locust: 'Langosta', Loon: 'Loon', Manta: 'Manta', Monkey: 'Singe', Moose: 'Orignal', Mosquito: 'Moustique', Mound: 'Montículo', Mountain: 'Montaña', Mountains: 'Montañas', Mouse: 'Souris', Mushroom: 'Champiñón', Narwhal: 'Narval', Octopus: 'Pieuvre', Otter: 'Loutre', Owl: 'Hibou', Panda: 'Panda', Peacock: 'Paon', Pelican: 'Pélican', Penguin: 'Pingouin', PersonHiking: 'Persona Caminando', Pompebled: 'Pompeble', Porcupine: 'Porc-épic', Pterodactyl: 'Ptérodactyle', Rabbit: 'Lapin', Raccoon: 'Raton laveur', Raindrops: 'Gotas de lluvia', Ram: 'Bélier', Rhinoceros: 'Rhinocéros', Rooster: 'Coq', Seahorse: 'Hippocampe', Seal: 'Phoque', Seedling: 'Planta de semillero', Shark: 'Requin', Sheep: 'Mouton', SignsPost: 'Publicación de señales', Snail: 'Escargot', Snake: 'Serpent', Spider: 'Araignée', SpiderBlackWidow: 'Araña Viuda Negra', SpiderWeb: 'Telaraña', Squirrel: 'Écureuil', Stegosaurus: 'Stegosaurus', Swan: 'Cygne', Tiger: 'Tigre', TreeDeciduous: 'Árbol caducifolio', TreeLarge: 'Árbol grande', TreePalm: 'Palmera de arbol', Triceratops: 'Triceratops', Trillium: 'Trilio', Turkey: 'Dinde', Turtle: 'Tortue', Tyrannosaurus: 'Tyrannosaure', Unicorn: 'Licorne', Volcano: 'Volcán', Vulture: 'Vautour', Water: 'Agua', Wave: 'La onda', Whale: 'Baleine', Wind: 'Viento', Wolf: 'Loup', Woodpecker: 'Pivert', Worm: 'Gusano'};

//You can use a styled-components pattern to color icons
const ColoredIcon = styled(IdsIcon)path { fill: ${(props) => props.color} };

//A nice function to split an array into chunks by Fernando Leal from https://stackoverflow.com/a/71483760
function splitChunks(sourceArray, chunkSize) {
if (chunkSize <= 0)
throw new Error("chunkSize must be greater than 0");
let result = [];
for (let i = 0; i < sourceArray.length; i += chunkSize) {
result[i / chunkSize] = sourceArray.slice(i, i + chunkSize);
}
return result;
}

function App() {
return (

Create React App Demo of the IDS Resource Library (idsreslib)

To test the idsreslib project Open a terminal to run the following commands:

npx create-react-app myApp to setup a react app more info can be found at https://create-react-app.dev.

cd myApp

npm install styled-components idsreslib to install styled components and the IDS Resource Library

replace App.js with the contents of this file in your favourite IDE

npm start

Colours

Icon Table

Icon Table French

Icons Green

Icons Red

Icon Rainbow

);
}

function ColorTree({colors}) {
return Object.entries(colors).map(([color, colorCode]) => style={{margin: 10, padding: 20,width: "120px", height: "120px", backgroundColor: colorCode, color: color === "Black" ? "white" : "black", border: "solid 1px black"}}>{color});
}

function IconRainbow({icon, colors}) {
return Object.values(colors).map(colorCode => );
}

function IconTree({icons, className}) {
return

{Object.entries(icons).map(([iconName, Icon]) => )}

}

function IconTable({icons, className}) {
const rows = splitChunks(Object.entries(icons), 18);
return

{rows.map((columns, rowIdx) => {columns.map(([iconName, Icon]) => )})}

{iconName}

}

function IconTableFrench({icons, className}) {
const rows = splitChunks(Object.entries(icons), 18);
return

{rows.map((columns, rowIdx) => {columns.map(([iconName, Icon]) => )})}

{frenchIconNames[iconName]}

}

export default App;
~~~

>App.css

~~~
body {
font-family: Roboto,Verdana,Geneva,Arial,Helvetica,sans-serif;
font-size: 12pt;
font-weight: normal;
height: auto;
}

.App {
text-align: center;
width: 100%;
}

.App-logo {
height: 40vmin;
pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}

.App-header {
background-color: #fefefe;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: black;
}

.App-link {
color: #61dafb;
}

.green > path{
fill: green;
}

.red > path{
fill: red;
}

.white > path{
fill: white;
}

.white {
background-color: black;
border: 1px solid black;
}

@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
~~~

IDS Resource Library

This is a React friendly collection of SVG icons for use in the Smrt1 Health IDS Project. The package consists of 90 svg icons and 13 colors pre-bundled via webpack and has a size of about 260K.

Dependencies

This package has a peer dependency of react and react-dom version 18.

Install

In the project directory, you can run npm install idsreslib or yarn add idsreslib to add the resource library to your project.

Usage

The package provides the following exports:

$3

A key value object the keys are the names of the colors and the values are the hex color codes for example:

~~~
{
"Blue": "#0000FF"
}
~~~

Usage:

~~~
import {colors} from 'idsreslib';

function ColorTable() {
return Object.entries(colors).map(([color, colorCode]) =>
{color}
);
}
~~~

$3

A key value object where the keys are the icon names and the values are React Components wrap an svg icon.

Usage:

~~~
import {icons} from 'idsreslib';

function Icons({width, height}) {
return

{Object.values(icons).map(([Icon]) => )}

}
~~~

$3

A React Component that accepts an icon prop which is the string name for which icon to display.

Usage in a React Component:

~~~
import {IdsIcon} from 'idsreslib';

export default function AardvarkIcon({width, height}) {
return ;
}
~~~

$3

A function that you pass a language string then it returns a 2 dimensional array of colors with localized names.

~~~
[["Blue", "#0000FF", "Blue"]]
~~~

Usage:

~~~
import {localizedColors} from 'idsreslib';

function ColorTable() {
return localizedColors('fr').map(([colorKey, color, colorName]) =>
{colorName}
);
}
~~~

$3

A function that you pass a language string then it returns a 2 dimensional array of icons with localized names.

Usage:

~~~
import {localizedIcons} from 'idsreslib';

function Icons({width, height}) {
return

{localizedIcons(en).map(([iconKey, Icon, iconName]) => - {iconName})}

}
~~~

Full create-react-app Demo Code

Open up a terminal and run the following to test this out using create-react-app:

~~~
npx create-react-app myApp
cd myApp
npm install styled-components idsreslib
~~~

Then replace App.js and App.css with the contents below using your favourite IDE and run:

~~~
npm start
~~~

>App.js
~~~
import './App.css';
import {colors, icons, IdsIcon} from './idsreslib';
import styled from 'styled-components';

//You can use a styled-components pattern to color icons
const ColoredIcon = styled(IdsIcon)path { fill: ${(props) => props.color} };

function App() {
return (

Create React App Demo of the IDS Resource Library (idsreslib)

To test the idsreslib project Open a terminal to run the following commands:

npx create-react-app myApp to setup a react app more info can be found at https://create-react-app.dev.

cd myApp

npm install styled-components idsreslib to install styled components and the IDS Resource Library

replace App.js with the contents of this file in your favourite IDE

npm start

Colours

Icon Table

Icon Table French

Icons Green

Icons Red

Icon Rainbow

);
}

function IconRainbow({icon, colors}) {
return Object.values(colors).map(colorCode => );
}

function IconTree({icons, className}) {
return

{Object.entries(icons).map(([iconName, Icon]) => )}

}

function IconTable({icons, className}) {
const rows = splitChunks(Object.entries(icons), 18);
return

{rows.map((columns, rowIdx) => {columns.map(([iconName, Icon]) => )})}

{iconName}

}

function IconTableFrench({icons, className}) {
const rows = splitChunks(Object.entries(icons), 18);
return

{rows.map((columns, rowIdx) => {columns.map(([iconName, Icon]) => )})}

{frenchIconNames[iconName]}

}

export default App;
~~~

>App.css

~~~
body {
font-family: Roboto,Verdana,Geneva,Arial,Helvetica,sans-serif;
font-size: 12pt;
font-weight: normal;
height: auto;
}

.App {
text-align: center;
width: 100%;
}

.App-logo {
height: 40vmin;
pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}

.App-header {
background-color: #fefefe;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: black;
}

.App-link {
color: #61dafb;
}

.green > path{
fill: green;
}

.red > path{
fill: red;
}

.white > path{
fill: white;
}

.white {
background-color: black;
border: 1px solid black;
}

@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
~~~

idsreslib

Dist Tags

IDS Resource Library

Dependencies

Install

Usage

$3

$3

$3

$3

$3

Full create-react-app Demo Code

Create React App Demo of the IDS Resource Library (idsreslib)

Colours

Icon Table

Icon Table French

Icons Green

Icons Red

Icon Rainbow

idsreslib

Dist Tags

IDS Resource Library

Dependencies

Install

Usage

$3

$3

$3

$3

$3

Full create-react-app Demo Code

Create React App Demo of the IDS Resource Library (idsreslib)

Colours

Icon Table

Icon Table French

Icons Green

Icons Red

Icon Rainbow