Icon

A component for rendering icon elements.

Structure

svg.a--icon

CSS

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.

Import

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

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 { Smiley } from "@phosphor-icons/react";
import { Icon } from 'lism-css/react';

<Icon as={Smiley} fz='2rem'/>

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

↓

Specifying props for Smiley

<Icon as={Smiley} 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:Smiley, 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='Smiley icon' fz='3em' 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="3em" height="3em" fill="currentColor" focusable="false" aria-label="Phosphor Icons logo" role="img" class="a--icon -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>