Icon (a--icon)

a--icon is a class for displaying icon elements.

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 Component

<Icon> automatically adds aria-label and role="img" when label is specified, or aria-hidden="true" when it is not.

Import

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

HTML Structure

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

or

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

Props

Property	Description
`icon`	Specifies the icon. The rendering behavior varies depending on the value provided.
`size`	Effective when calling a preset icon. Output as `width` and `height`.
`label`	Output as `aria-label`. When specified, `role="img"` is also added; when omitted, `aria-hidden="true"` is output instead.

Usage

Using an external package

Use the common Lism component properties as and exProps.

This allows third-party packages such as react-icons and @phosphor-icons/react to be rendered through <Icon>.

↓

Specifying an external component via as

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

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

To explicitly pass properties supported by the external component (such as SmileyIcon), use exProps.

↓

Specifying props for SmileyIcon

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

Combining `as` and `exProps` into `icon`

Point

In <Icon>, you can also pass as and exProps together in the following format:

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

↓

Example of specifying as and exProps together via icon

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

Using preset icons

The Lism package (lism-css) includes several built-in SVG icons.

You can call a preset icon by specifying its name as a string via icon='icon-name'. (Phosphor Icons are used.)

↓

Phosphor icon list

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 icon list

logo-facebook

logo-instagram

logo-line

logo-pinterest

logo-tiktok

logo-x

logo-youtube

logo-codepen

logo-github

logo-tumblr

logo-amazon

↓

Example of calling a preset icon

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

Writing SVG directly

<Icon> is rendered as <svg> when a viewBox prop is specified. You can place path elements and other SVG content directly as children.

↓

Passing path and other elements directly as children

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

Using `src` to specify an image

↓

Usage example

Img icon.

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