Lism Icons

ReactとAstroで使えるオリジナルのSVGアイコン集です。Lism CSSへの依存はありません。

使い方

pnpm add @lism-css/icons

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

import { HomeIcon, StarHalfIcon } from '@lism-css/icons/react';

<HomeIcon aria-label="ホーム" size={24} />
<StarHalfIcon strokeWidth={2} aria-label="半分の星" />

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

---
import { HomeIcon, StarHalfIcon } from '@lism-css/icons/astro';
---

<HomeIcon aria-label="ホーム" size={24} />
<StarHalfIcon stroke-width={2} aria-label="半分の星" />

@lism-css/icons/react/HomeIconや@lism-css/icons/astro/HomeIconからdefault importすることもできます。名前はstar-half→StarHalfIcon、menu-2→Menu2Iconのようにパスカルケースへ変換してIconを付けています。

大きさはsizeで幅・高さをまとめて指定でき、既定は1emです。width・heightを個別に指定した場合はそちらを優先します。色はcurrentColorで周囲の文字色を引き継ぎます。線幅の既定は1.5で、ReactではstrokeWidth、Astroではstroke-widthで指定できます。AstroではstrokeWidthも受け付け、両方あればstroke-widthを優先します。

線幅はweightで段階名としても指定できます。light・regular・boldがそれぞれ線幅1・1.5・2に変換され、strokeWidth（Astroではstroke-widthも）を併記した場合はそちらを優先します。weightはSVG属性としては出力しません。

<HomeIcon weight="bold" />

塗り版はHeartFillIconのように別コンポーネントで、weightで線と塗りを切り替えることはできません。StarHalfIconは左半分の塗りと外周の線を組み合わせており、線幅の変更は外周に反映されます。HeartFillIconなど塗りだけのアイコンは線幅で太さが変わりません。BadFillIcon・BanFillIcon・BookFillIcon・CalendarFillIcon・GoodFillIcon・NoteFillIconのように塗り版でも線を残すアイコンでは、その線に線幅指定が適用され、塗りの外形は変わりません。

通常は装飾として読み上げ対象から外します。アイコン単体に意味を持たせる場合はaria-labelかaria-labelledbyを指定してください。標準のSVG属性を渡せるほか、Reactではrefと子要素、Astroではslotも使用できます。

SVGデータ

@lism-css/icons/dataから、全アイコンのicons、名前の型IconNameを読み込めます。各アイコンはviewBox、ルート属性のattributes、内部マークアップのbodyを持ちます。属性名はstroke-widthなどSVGの表記です。

制作データとライセンス

収録アイコンは、円・直線・共通の寸法から設計したオリジナルです。MITライセンスで提供します。ライセンス本文はLICENSEを参照してください。

編集元はdesign/lism-icons-geometric-study.aiです。regular・fill一覧に配置した原寸マスターから、出力専用のdesign/lism-icons.aiを生成します。設計方針は設計文書、同期・SVG書き出し・パッケージ生成の操作は制作スクリプトの使い方を参照してください。

src/svg/には出力用.aiから書き出したSVGを保存し、アイコンデータとReact/Astroコンポーネントの生成入力にします。ビルドでは.aiを読みません。アイコンの追加・削除はSVGの一覧から自動で反映されます。