アイコン（@lism-css/icons）

@lism-css/icons は、React・Astro で使える SVG（線や形で描く画像の形式）のアイコン集です。Lism CSS と同じ作者が作っています。線のアイコンと塗りのアイコンが入っていて、Lism CSS を使っていないプロジェクトでも使えます。

どんなときに使う？#

• ボタンや見出しの横に、小さな絵（アイコン）を付けたいとき
• アイコンの色や大きさを、まわりの文字に合わせたいとき

入れ方#

pnpm add @lism-css/icons

使い方#

コンポーネントの名前は、BookIcon・HeartFillIcon のように、最後に Icon が付きます。React では @lism-css/icons/react、Astro では @lism-css/icons/astro から読み込みます。

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="お気に入り" />
    </>
  );
}

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

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

• 色は、まわりの文字の色をそのまま使います
• 飾りのアイコンは、最初から読み上げの対象から外れています。アイコンだけで意味を伝えるときは、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} />

• strokeWidth（Astro では stroke-width か strokeWidth）で数を書くと、weight より優先されます
• Astro で stroke-width と strokeWidth の両方を書くと、stroke-width が勝ちます
• weight は、線のアイコンと塗りのアイコンを入れかえる指定ではありません。塗りしか無いアイコン（HeartFillIcon など）では、太さは変わりません。NoteFillIcon のように塗りと線の両方があるものは、線の部分だけが変わります

Lism の Icon と組み合わせる#

Lism の <Icon>（a--icon を出すコンポーネント）の icon に渡すと、c（色）や fz（大きさ）などの Lism Props が使えます。React でも、読み込む場所を /react に変えれば同じです。

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

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

<Icon> の Props（icon・size・label）は a--icon（アイコン） にあります。

ライセンス#

アイコンはすべてこのパッケージのために描かれたもので、ライセンスは MIT です。くわしくは パッケージの README にあります。

アイコンの一覧#

入っているアイコンは次の 82 個です。

AlertFillIcon、AlertIcon、ArrowDownIcon、ArrowHalfRightIcon、ArrowLeftIcon、ArrowLongDownIcon、ArrowLongLeftIcon、ArrowLongRightIcon、ArrowLongUpIcon、ArrowRightIcon、ArrowUpIcon、BadFillIcon、BadIcon、BanFillIcon、BanIcon、BookFillIcon、BookIcon、BookmarkFillIcon、BookmarkIcon、CalendarFillIcon、CalendarIcon、CaretDownFillIcon、CaretDownIcon、CaretLeftFillIcon、CaretLeftIcon、CaretRightFillIcon、CaretRightIcon、CaretUpFillIcon、CaretUpIcon、CartFillIcon、CartIcon、ChatFillIcon、ChatIcon、CheckCircleFillIcon、CheckCircleIcon、CheckIcon、ClockFillIcon、ClockIcon、ClockwiseIcon、DotsIcon、DotsVerticalIcon、DownloadIcon、FolderFillIcon、FolderIcon、GearFillIcon、GearIcon、GoodFillIcon、GoodIcon、HeartFillIcon、HeartIcon、HomeFillIcon、HomeIcon、InfoFillIcon、InfoIcon、LightbulbFillIcon、LightbulbIcon、LinkIcon、LockFillIcon、LockIcon、LockOpenFillIcon、LockOpenIcon、Menu2Icon、MenuIcon、NoteFillIcon、NoteIcon、QuestionFillIcon、QuestionIcon、SearchIcon、SignInIcon、SignOutIcon、StarFillIcon、StarHalfFillIcon、StarHalfIcon、StarIcon、TagFillIcon、TagIcon、UploadIcon、UserFillIcon、UserIcon、WarningFillIcon、WarningIcon、XIcon

関連するページ#

• a--icon（アイコン）
• Lism コンポーネント（React・Astro）
• Lism Props（コンポーネントの指定）