govil-strip-icons

A strip of boxes that includes a big icon centered with Router & Link.

How to use

Clone this repo to your local computer, then run:

• npm install && npm run build

You can now import govil-strip-icons as a normal package installed from npm like so:

import StripIcons from 'govil-strip-icons';
...

You can also import the type definitions if you're using TypeScript like so:

import StripIcons, { ISItems, ISItem } from 'govil-strip-icons';
...

Available props

interface ISItems {
    items: Array<ISItem>
}

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 StripIcons, { ISItems } from 'govil-strip-icons';

const StripIconsDemo: 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'
  }]
}

...

<StripIcons {...StripIconsDemo }/>
//or <StripIcons items={StripIconsDemo.items}/>
...

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