@lism-css/icons

@lism-css/iconsは、Lism CSSと同じ開発元が提供する、React・Astro向けのSVGアイコン集です。線・塗りのアイコンを収録しており、Lism CSSを導入していないプロジェクトでも使えます。

インストール

pnpm add @lism-css/icons

基本的な使い方

コンポーネント名はBookIcon・HeartFillIconのように、末尾にIconが付きます。

Reactでは/reactから読み込みます。

import { BookIcon, HeartFillIcon } from '@lism-css/icons/react';

export function Example() {
  return (
    <>
      <BookIcon size={24} strokeWidth={2} aria-label="本" />
      <HeartFillIcon size="1.5em" aria-label="お気に入り" />
    </>
  );
}

Astroでは/astroから読み込みます。

---
import { BookIcon, HeartFillIcon } from '@lism-css/icons/astro';
---

<BookIcon size={24} stroke-width={2} aria-label="本" />
<HeartFillIcon size="1.5em" aria-label="お気に入り" />

大きさはsizeで幅・高さをまとめて指定でき、既定は1emです。width・heightを個別に指定した場合はそちらを優先します。色は周囲の文字色を引き継ぎます。

装飾用のアイコンは、既定で読み上げの対象から外れます。アイコン単体で意味を伝える場合は、上の例のようにaria-labelを指定してください。

線の太さ

線アイコンは24グリッドで描画され、既定の線幅は1.5です。weightで線の太さを選べます。

import { InfoIcon } from '@lism-css/icons/react';

<InfoIcon weight="light" />
<InfoIcon weight="regular" />
<InfoIcon weight="bold" />
<InfoIcon weight="bold" strokeWidth={1.25} />

Astroでも同じweightを使えます。線幅を直接指定する場合は、ReactではstrokeWidth、Astroではstroke-widthまたはstrokeWidthを使います。明示した線幅はweightより優先され、Astroで両表記を指定した場合はstroke-widthが優先されます。

weightは線と塗りを切り替える指定ではありません。HeartFillIconのような塗りだけのアイコンは線幅で太さが変わりません。NoteFillIconのように塗りと線を併用するアイコンでは、線の部分に適用されます。

Lism CSSと組み合わせる

Lism CSSのIconコンポーネントへ渡すと、c・fzなどのLism Propsを使えます。Reactでも同じ書き方で、import先をそれぞれ/reactに変えて利用できます。

---
import { Icon } from 'lism-css/astro';
import { BookIcon } from '@lism-css/icons/astro';
---

<Icon icon={BookIcon} fz="2xl" c="blue" weight="bold" />

アイコンはすべてオリジナルです。ライセンスはMITです。詳しくはパッケージのREADMEをご覧ください。

収録アイコン一覧