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構造

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

or

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

専用Props

プロパティ	説明
`icon`	アイコンを指定できます。指定した内容によって出力処理が変わります。
`size`	プリセットアイコンを呼び出す場合に有効。`width`, `height`として出力されます。
`label`	`aria-label`として出力します。指定があれば`role="img"`が同時に出力され、指定がない場合は`aria-hidden="true"`が出力されます。

Usage

外部のパッケージを利用する方法

Lismコンポーネントの共通プロパティ、as&exPropsを使用します。

これにより、react-icons,@phosphor-icons/reactなどのサードパーティパッケージを<Icon>を通して展開することができます。

↓

外部コンポーネントをasに指定する

import { SmileyIcon } from '@phosphor-icons/react';
import { Icon } from 'lism-css/react';

<Icon as={SmileyIcon} fz="2rem" />

この時、外部コンポーネントであるSmileyIconで使えるプロパティを明示的に外部用のプロパティとして指定してする場合は、exPropsを利用します。

↓

SmileyIcon用のプロパティを指定する

<Icon as={SmileyIcon} exProps={{ weight: 'fill', size: '3em' }} c="blue" />

as, exProps のを icon にまとめて指定する

Point

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

<Icon icon={{as:Component, exProps1, exProps2, ...}} />

↓

iconにas, exPropsを一括指定する例

<Icon icon={{as:SmileyIcon, weight:'fill', size:'3em'}} c="blue" />

プリセットアイコンを呼び出す方法

Lismパッケージ（lism-css)内にはいくつかsvgアイコンを内包しています。

icon='icon-name'と文字列でその名前を指定することで、プリセットアイコンを呼び出すことができます。
（Phosphor Icons を使わせていただいています。）

↓

Phosphorアイコン一覧

folder

tag

calendar

clock

clockwise

check

check-circle

ban

alert

warning

question

info

good

bad

bookmark

bookmark-fill

heart

heart-fill

star

star-fill

star-half

book

note

chat

lightbulb

link

cart

gear

home

sign-in

sign-out

user

lock

lock-open

dot

dots

caret-down

caret-right

caret-down-fill

caret-right-fill

arrow-down

arrow-right

↓

ロゴアイコン一覧

logo-facebook

logo-instagram

logo-line

logo-pinterest

logo-tiktok

logo-x

logo-youtube

logo-codepen

logo-github

logo-tumblr

logo-amazon

↓

プリセットアイコン呼び出し例

<Cluster g="15">
  <Icon icon="lightbulb" size="40px" />
  <Icon icon="warning" fz="2xl" c="blue" />
</Cluster>

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>

<svg
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 256 256"
  width="1em"
  height="1em"
  fill="currentColor"
  focusable="false"
  aria-label="SmileyIcon icon"
  role="img"
  class="a--icon -fz:4xl -c"
  style="--c:var(--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>
</svg>

src でimgを指定する方法

↓

使用例

Img icon.

<Flex g="10" ai="center">
  <Icon fz="4xl" src="/img/avatar01.jpg" alt="image" />
  <span>Img icon.</span>
</Flex>