Lism CSS
Docs
検索

Icon (a--icon)

a--iconは、アイコン要素を表示するためのクラスです。

CSS

.a--icon {
  flex-shrink: 0; // アイコンはflex直下の子要素にしたい場合が多いのでデフォルトで適用する
}

/* fill指定のない svg にテキストカラーを継承させる */
.a--icon:where(:not([fill])) {
  fill: currentcolor;
}

/* 属性によるサイズ指定がない場合は 1em サイズが基本　*/
.a--icon:where(:not([width])) {
  width: 1em;
  height: 1em;
}

Lismコンポーネント

<Icon>は、labelが指定されていればaria-labelとrole="img"を、指定がなければaria-hidden="true"を自動的に付与します。

Import

import { Icon } from 'lism-css/react';

出力されるHTML構造

実際に出力されるタグはicon・viewBox・src・asの指定方法によってsvgやimgなどに変わりますが、aria-hidden/aria-labelの付与規則はどのタグでも共通です。

svg.a--icon[aria-hidden="true"]


or


svg.a--icon[aria-label="..."][role="img"]

専用Props

プロパティ 説明
icon アイコンコンポーネント・SVG文字列・{as, ...exProps}形式のオブジェクトを指定します。
size SVGの幅・高さの既定値。明示したwidth・heightを優先します。
label aria-labelとして出力します。指定があればrole="img"が同時に出力され、指定がない場合はaria-hidden="true"が出力されます。

Usage

@lism-css/iconsを利用する方法

@lism-css/iconsは、Lism CSSと同じ開発元が提供する、React・Astro向けのSVGアイコン集です。lism-css本体にはアイコンのSVGデータを含まないため、別途インストールして必要なコンポーネントをiconに渡します。

インストール方法と収録アイコン一覧は、@lism-css/iconsの解説ページをご覧ください。

Reactでは@lism-css/icons/react、Astroでは@lism-css/icons/astroからimportします。

↓
アイコンコンポーネントの指定例
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>

色はcで指定します。線の太さやweightの使い方は、@lism-css/iconsの解説を参照してください。

as・exPropsで指定する方法

icon={HomeIcon}の代わりに、Lismコンポーネントの共通プロパティasでも指定できます。

↓
アイコンコンポーネントをasに指定する
import { HomeIcon } from '@lism-css/icons/react';
import { Icon } from 'lism-css/react';


<Icon as={HomeIcon} size="2em" />

exPropsには、読み込んだアイコンコンポーネントへ渡すプロパティをまとめて指定できます。次の例では、線幅とサイズを指定しています。

↓
HomeIcon用のプロパティを指定する
<Icon as={HomeIcon} exProps={{ strokeWidth: 2, size: '3em' }} c="blue" />

as・exPropsをiconにまとめて指定する方法

<Icon>では、以下のような形式でas, exPropsを一括指定することもできます。

<Icon icon={{as:Component, exProps1, exProps2, ...}} />
↓
iconにas, exPropsを一括指定する例
<Icon icon={{as:HomeIcon, strokeWidth:2, size:'3em'}} c="blue" />

react-iconsや@phosphor-icons/reactなどのサードパーティ製アイコンも、同じようにiconやasで指定できます。AstroでReact製のアイコンを使う場合は、Astro側でReactインテグレーションを有効にしてください。

SVG文字列を渡す方法

iconには<svgで始まるSVG全体の文字列も渡せます。viewBox・線幅などのSVG属性を含めて指定します。

<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" />

svgを直接記述する方法

<Icon>は、viewBoxの指定があれば<svg>で出力されます。
子要素にそのままpathなどを配置してsvgを描画できます。

↓
pathなどをそのまま子要素に渡す
<Icon viewBox="0 0 256 256" label="SmileyIcon icon" fz="4xl" c="blue">
  <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,216ZM80,108a12,12,0,1,1,12,12A12,12,0,0,1,80,108Zm96,0a12,12,0,1,1-12-12A12,12,0,0,1,176,108Zm-1.07,48c-10.29,17.79-27.4,28-46.93,28s-36.63-10.2-46.92-28a8,8,0,1,1,13.84-8c7.47,12.91,19.21,20,33.08,20s25.61-7.1,33.07-20a8,8,0,0,1,13.86,8Z"></path>
</Icon>

src でimgを指定する方法

↓
使用例
Img icon.
<Flex g="10" ai="center">
  <Icon fz="2xl" src="https://emojix.s3.ap-northeast-1.amazonaws.com/g3/svg/1f916.svg" alt="image" />
  <span>Img icon.</span>
</Flex>

© 2026 Lism CSS.