A strip of NavLink boxes that includes big icon centered
npm install govil-strip-menu-iconsA strip of boxes that includes a big icon centered.
Implemented with Router & Link.
Clone this repo to your local computer, then run:
- npm install && npm run build
You can now import govil-strip-menu-icons as a normal package installed from npm like so:
```
import StripMenuIcons from 'govil-strip-menu-icons';
...
You can also import the type definitions if you're using TypeScript like so:
``
import StripMenuIcons, { ISItems, ISItem } from 'govil-strip-menu-icons';
...
`
interface ISItems {
items: Array
}
interface ISItem {
link: string; // router link
icon: string; // image src url
title: string; //on Hover ect
}
`
To customize this component, pass ComponentModel to the items prop.
`
// your-component.tsx
import StripMenuIcons, { ISItems } from 'govil-strip-menu-icons';
const StripMenuIconsDemo: ISItems = {
items: [{
icon: 'https://www.gov.il/BlobFolder/../a.png',
link: '/a',
title: 'title a'
},{
icon: 'https://www.gov.il/BlobFolder/../b.png',
link: '/b',
title: 'title b'
},{
icon: 'https://www.gov.il/BlobFolder/../c.png',
link: '/c',
title: 'title c'
},{
icon: 'https://www.gov.il/BlobFolder/../d.png',
link: '/d',
title: 'title d'
},{
icon: 'https://www.gov.il/BlobFolder/../e.png',
link: '/e',
title: 'title e'
}]
}
...
//or
...
``
This component was built for the benefit of the citizens of Israel and the OpenSource community on behalf of the Israeli government and freely published in npm