React
React
Step one
In the root of your project:
// using npm
npm install @ukic/react @ukic/fonts
// using yarn
rm package-lock.json
yarn add @ukic/react @ukic/fontsStep two
Add the following into the top level CSS file for your project.
@import "@ukic/fonts/dist/fonts.css";
@import "@ukic/react/dist/core/core.css";
In order to be rendered consistently across browsers and in line with modern standards, each of the ICDS components uses styles from a global CSS file based on
If you would like to import these styles to apply them to the rest of your project and slotted elements used within any of the ICDS components, add the following into the top level CSS file as well.
@import "@ukic/react/dist/core/normalize.css";Step three
Import the component(s) in your React files.
import { IcComponent } from "@ukic/react";Working with slotted SVGs
Step one
To slot an SVG into one of our React components, import theSlottedSVG
component from@ukic/react
into your React files. This will prevent an error stating that property 'slot' doesn't exist.
To scale the icons, use the
viewBox
attribute
import { SlottedSVG } from "@ukic/react";Step two
Replace any instances of<svg>
with<SlottedSVG>
.
//Before
<IcTopNavigation appTitle="App title"><svg slot="app-icon" path={path} /><svg slot="app-icon"><path d="..." /></svg></IcTopNavigation>
//After
<IcTopNavigation appTitle="App title">{/* Can be implemented either way */}<SlottedSVG slot="app-icon" path={path} viewBox="0 0 24 24" /><SlottedSVG slot="app-icon" viewBox="0 0 24 24"><path d="..." /></SlottedSVG></IcTopNavigation>Using Material Design Icons (MDI) with SlottedSVG
To use<SlottedSVG>
with MDI Icons, install and import the@mdi/js
package.
npm i @mdi/jsimport { mdiHome } from "@mdi/js";
<IcTopNavigation appTitle="App title"><SlottedSVG slot="app-icon" path={mdiHome} viewBox="0 0 24 24" /></IcTopNavigation>;