@xpadev-net/designsystem-icons

designsystem-icons

GitHub npm

デジタル庁が提供している行政文脈向けのアイコンセットをReactコンポーネント化したライブラリです

イラストレーション・アイコン素材利用規約 の元で提供されているアイコンの構造を一部Reactコンポーネント用に修正したものです

インストール

npm install @xpadev-net/designsystem-icons

yarn add @xpadev-net/designsystem-icons

pnpm add @xpadev-net/designsystem-icons

使い方

各アイコンはnamed exportされています
アイコン名は元ファイル名に基づいており、末尾が hoge_fill.icon の場合は HogeIcon 、 huga_line.svg の場合は HugaOutlinedIcon となります

propsはSVG標準のpropsに加え、colorを指定でき、colorはstyle属性のfillプロパティとして適用されます

例

import { ArrowLeftIcon } from "@xpadev-net/designsystem-icons";

const Component = () => {
  return (
    <div>
      <ArrowLeftIcon color={"red"}/>
    </div>
  );
};

ライセンス

アイコンはデジタル庁の イラストレーション・アイコン素材利用規約 の元で提供されています
このライブラリ自体はMITライセンスで公開しています