Lism Tips

a--icon（アイコン）

a--icon は、アイコンを文字と同じ大きさ・同じ色で表示するクラスです。SVG・アイコン集・画像に使えます。

a--icon は、アイコンを表示するためのクラスです。SVG（線や形を数式で描く画像の形式）に付けると、まわりの文字と同じ大きさ（1em）・同じ色になります。

どんなときに使う？#

  • ボタンや見出しの横に、小さなアイコンを添えたいとき
  • アイコンの色を、文字の色と一緒に変えたいとき

使い方#

svg に a--icon を付けます。width と fill を書かなければ、大きさは文字と同じ 1em、色は文字の色になります。大きさは -fz（font-size。文字の大きさ）、色は -c（color）で変えられます。

表示例

文字と同じ大きさ

大きく、青く

html
<p class="l--flex -g:10 -ai:center">
  <svg class="a--icon" viewBox="0 0 256 256" aria-hidden="true"><path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Z"></path></svg>
  <span>文字と同じ大きさ</span>
</p>
<p class="l--flex -g:10 -ai:center -fz:2xl -c" style="--c: var(--blue)">
  <svg class="a--icon" viewBox="0 0 256 256" aria-hidden="true"><path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Z"></path></svg>
  <span>大きく、青く</span>
</p>

意味を持つアイコンには aria-label="…" と role="img" を付け、飾りだけのアイコンには aria-hidden="true" を付けます。

画像をアイコンにする#

img に付けることもできます。絵文字の SVG 画像などを、文字の横に並べるときに使います。

html
<div class="l--flex -g:10 -ai:center">
  <img class="a--icon -fz:2xl" src="（画像の URL）" alt="image" />
  <span>Img icon.</span>
</div>

a--icon のしくみ#

a--icon が付ける CSS は次のとおりです。

scss
.a--icon {
  flex-shrink: 0; // Flex の中で縮まないようにする
}

/* fill の指定がない svg は、文字の色を受けつぐ */
.a--icon:where(:not([fill])) {
  fill: currentcolor;
}

/* width の指定がなければ 1em 四方にする */
.a--icon:where(:not([width])) {
  width: 1em;
  height: 1em;
}

flex-shrink: 0 があるので、横に並べた文章が長くなっても、アイコンがつぶれません。

React・Astro で書く場合#

コンポーネントでは <Icon> を使います。

Props 決めること
icon 出すアイコン。アイコンのコンポーネント・SVG の文字列・{as, ...exProps} の形のオブジェクト
size SVG の幅と高さ。width・height を書いたときは、そちらが勝つ
label aria-label になる。付けると role="img" も出て、付けないと aria-hidden="true" が出る

出てくるタグは、icon・viewBox・src・as の書き方によって svg や img などに変わります。aria-hidden・aria-label の付き方は、どのタグでも同じです。

アイコン集（@lism-css/icons）を使う#

lism-css にはアイコンの絵そのものは入っていません。同じ作者のアイコン集 @lism-css/icons を別に入れて、使うアイコンを icon に渡します。React は @lism-css/icons/react、Astro は @lism-css/icons/astro から読み込みます。

jsx
import { Cluster, Icon } from 'lism-css/react';
import { LightbulbIcon, WarningIcon } from '@lism-css/icons/react';

<Cluster g="15">
  <Icon icon={LightbulbIcon} size="40px" />
  <Icon icon={WarningIcon} fz="2xl" c="blue" />
</Cluster>

入れ方と収められたアイコンは アイコン（@lism-css/icons） にあります。

as と exProps で渡す#

icon の代わりに、共通の Props の as でもアイコンを渡せます。exProps には、アイコンのコンポーネントへ渡したい Props（線の太さ・大きさなど）をまとめて書きます。

jsx
<Icon as={HomeIcon} size="2em" />
<Icon as={HomeIcon} exProps={{ strokeWidth: 2, size: '3em' }} c="blue" />
補足

as と exProps は、icon={{ as: HomeIcon, strokeWidth: 2, size: '3em' }} のように icon の1つにまとめても書けます。

react-icons や @phosphor-icons/react のような、ほかのアイコン集も同じように渡せます。Astro で React のアイコンを使うときは、Astro の設定で React を使えるようにしておきます（React のインテグレーションを入れる）。

SVG を文字列や中身で渡す#

icon には、<svg で始まる SVG 全体の文字列も渡せます。また、viewBox を指定すると <svg> で出力されるので、子要素に path などを直接書けます。

jsx
<Icon icon={'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="m5 12 4 4L19 6" /></svg>'} c="green" />

<Icon viewBox="0 0 256 256" label="SmileyIcon icon" fz="4xl" c="blue">
  <path d="..." />
</Icon>

画像を src で渡す#

jsx
<Icon fz="2xl" src="（画像の URL）" alt="image" />

関連するページ#

公式ドキュメント

2026年10月5日時点の内容（lism-css 1.0.1・@lism-css/ui 0.40.1）をもとに、やさしい日本語でまとめています。

ページの一覧