@politiet/pds-icon v0.3.2

Denne komponenten trenger material-icons npm pakken.

Liste over alle ikoner

For å ta i bruk komponenten må du først importere css eller scss filene i app.tsx eller din ekvivalente top level komponent.

For css:

import "material-icons/iconfont/outlined.css";
import "material-icons/iconfont/filled.css";

For scss:

import "material-icons/iconfont/outlined.scss";
import "material-icons/iconfont/filled.scss";

Outlined

<div id="test-icon-1">
  <Icon type="info" color={"mid-blue"} size="xsmall" text="Informasjon" />
  &nbsp;
  <Icon type="info" color={"mid-blue"} size="small" text="Informasjon" />
  &nbsp;
  <Icon type="info" color={"mid-blue"} text="Informasjon" />
  &nbsp;
  <Icon type="info" color={"mid-blue"} size="large" />
  &nbsp;
  <Icon type="info" color={"mid-blue"} size="xlarge" />
  &nbsp;
  <Icon type="info" color={"mid-blue"} size="xxlarge" />
</div>

Filled

<div id="test-icon-2">
  <Icon type="info" filled color={"mid-blue"} size="xsmall" />
  &nbsp;
  <Icon type="info" filled color={"mid-blue"} size="small" />
  &nbsp;
  <Icon type="info" filled color={"mid-blue"} />
  &nbsp;
  <Icon type="info" filled color={"mid-blue"} size="large" />
  &nbsp;
  <Icon type="info" filled color={"mid-blue"} size="xlarge" />
  &nbsp;
  <Icon type="info" filled color={"mid-blue"} size="xxlarge" />
</div>

Other colors

<div id="test-icon-3">
  <Icon type="info" filled color={"black"} />
  &nbsp;
  <Icon type="info" filled color={"dark-blue"} />
  &nbsp;
  <Icon type="info" filled color={"mid-blue"} />
  &nbsp;
  <Icon type="info" filled color={"light-blue"} />
  &nbsp;
  <Icon type="info" filled color={"interactive-blue"} />
  &nbsp;
  <Icon type="info" filled color={"yellow"} />
  &nbsp;
  <Icon type="info" filled color={"alert-warning"} />
  &nbsp;
  <Icon type="info" filled color={"alert-danger"} />
  &nbsp;
  <Icon type="info" filled color={"alert-success"} />
  <br />
  <Icon type="info" filled color={"black"} tint={"tint-2"} />
  &nbsp;
  <Icon type="info" filled color={"dark-blue"} tint={"tint-2"} />
  &nbsp;
  <Icon type="info" filled color={"mid-blue"} tint={"tint-2"} />
  &nbsp;
  <Icon type="info" filled color={"light-blue"} tint={"tint-2"} />
  &nbsp;
  <Icon type="info" filled color={"interactive-blue"} tint={"tint-2"} />
  &nbsp;
  <Icon type="info" filled color={"yellow"} tint={"tint-2"} />
  &nbsp;
  <Icon type="info" filled color={"alert-warning"} tint={"tint-2"} />
  &nbsp;
  <Icon type="info" filled color={"alert-danger"} tint={"tint-2"} />
  &nbsp;
  <Icon type="info" filled color={"alert-success"} tint={"tint-2"} />
  <br />
  <Icon type="info" color={"black"} />
  &nbsp;
  <Icon type="info" color={"dark-blue"} />
  &nbsp;
  <Icon type="info" color={"mid-blue"} />
  &nbsp;
  <Icon type="info" color={"light-blue"} />
  &nbsp;
  <Icon type="info" color={"interactive-blue"} />
  &nbsp;
  <Icon type="info" color={"yellow"} />
  &nbsp;
  <Icon type="info" color={"alert-warning"} />
  &nbsp;
  <Icon type="info" color={"alert-danger"} />
  &nbsp;
  <Icon type="info" color={"alert-success"} />
  <br />
  <Icon type="info" color={"black"} tint={"tint-2"} />
  &nbsp;
  <Icon type="info" color={"dark-blue"} tint={"tint-2"} />
  &nbsp;
  <Icon type="info" color={"mid-blue"} tint={"tint-2"} />
  &nbsp;
  <Icon type="info" color={"light-blue"} tint={"tint-2"} />
  &nbsp;
  <Icon type="info" color={"interactive-blue"} tint={"tint-2"} />
  &nbsp;
  <Icon type="info" color={"yellow"} tint={"tint-2"} />
  &nbsp;
  <Icon type="info" color={"alert-warning"} tint={"tint-2"} />
  &nbsp;
  <Icon type="info" color={"alert-danger"} tint={"tint-2"} />
  &nbsp;
  <Icon type="info" color={"alert-success"} tint={"tint-2"} />
</div>