Icon
アイコン要素を出力するためのコンポーネント。
svg.l--icon| プロパティ | 説明 |
|---|---|
icon | アイコンを指定できます。指定した内容によって出力処理が変わります。 |
size | プリセットアイコンを呼び出す場合に有効。width, heightとして出力されます。 |
scale —scale | アイコンの scale を指定できます。css変数で出力されます。 |
label aria-label | aria-labelとして出力します。指定があればrole="img"が同時に出力され、指定がない場合はaria-hidden="true"が出力されます。 |
Import
Section titled “Import”import { Icon } from 'lism-css';外部のパッケージを利用する方法
Section titled “外部のパッケージを利用する方法”Lismコンポーネントの共通プロパティ、as&exPropsを使用します。
これにより、react-icons,@phosphor-icons/reactなどのサードパーティパッケージを<Icon>を通して展開することができます。
↓
外部コンポーネントを
asに指定するimport { Smiley } from "@phosphor-icons/react";import { Icon } from 'lism-css/react';
<Icon as={Smiley} fz='2rem'/>この時、外部コンポーネントであるSmileyで使えるプロパティを明示的に外部用のプロパティとして指定してする場合は、exPropsを利用します。
↓
Smiley用のプロパティを指定する<Icon as={Smiley} exProps={{ weight:'fill', size:'3em' }} c='blue' />as, exProps のを icon にまとめて指定する
Section titled “as, exProps のを icon にまとめて指定する”Point
<Icon>では、以下のような形式でas, exPropsを一括指定することもできます。
<Icon icon={{as:Component, exProps1, exProps2, ...}} /> ↓
iconにas, exPropsを一括指定する例<Icon icon={{as:Smiley, weight:'fill', size:'3em'}} c='blue' />プリセットアイコンを呼び出す方法
Section titled “プリセットアイコンを呼び出す方法”Lismパッケージ（lism-css)内にはいくつかsvgアイコンを内包しています。
icon='icon-name'と文字列でその名前を指定することで、プリセットアイコンを呼び出すことができます。
（Phosphor Icons を使わせていただいています。）
↓
Phosphorアイコン一覧
folder
tag
calendar
clock
clockwise
check
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
search
sign-in
sign-out
user
lock
lock-open
x
menu
dots
caret-down
caret-right
caret-down-fill
caret-right-fill
arrow-down
arrow-right
↓
ロゴアイコン一覧
logo-facebook
logo-instagram
logo-line
logo-pinterest
logo-pocket
logo-tiktok
logo-twitter
logo-x
logo-youtube
logo-codepen
logo-github
logo-tumblr
logo-amazon
logo-wordpress
↓
プリセットアイコン呼び出し例
<Cluster g='20'> <Icon icon='lightbulb' size='40px' /> <Icon icon='warning' fz='2xl' c='blue' /></Cluster>svgを直接記述する方法
Section titled “svgを直接記述する方法”<Icon>は、viewBoxの指定があれば<svg>で出力されます。
子要素にそのままpathなどを配置してsvgを描画できます。
↓
pathなどをそのまま子要素に渡す<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>Opt-in
Section titled “Opt-in”variant='inline'
Section titled “variant='inline'”アイコンをインラインで文字と並んでも見やすくなるような調整を追加したようなバリエーションクラスの追加例を紹介します。
.l--icon--inlineに対しては次のようなCSSが適用されており、インラインで文字と並んでも見やすくなるような調整がデフォルトで入っています。
↓
追加CSS
.l--icon--inline { --scale: 1.125; /* アイコンは小さくなりがちなので、デフォルトでほんのり拡大 */ vertical-align: -0.125em; /* テキストの下部付近に揃える */ margin-inline: calc(1em * (var(--scale) - 1) / 2); /* scaleを考慮し、マージンを確保 */} ↓
使用例
Horse , and Cat .
Lorem ipsum dolor sit amet.
<p> Horse <Icon variant='inline' as={Horse} />, and Cat <Icon variant='inline' as={Cat}/>.</p><p> <Icon variant='inline' icon={{as:WarningCircle, weight:'fill'}} scale='2' c='red' /> Lorem ipsum dolor sit amet.</p>