Icon
アイコン要素を出力するためのコンポーネント。
構造
svg.a--icon(.a--icon--inline)
or
span.a--icon(.a--icon--emoji|.a--icon--mask)(.a--icon--inline)Props
| プロパティ | 説明 |
|---|---|
variant | 指定すると、.a--icon--{variant}クラスも同時に出力されます。 |
as | 外部のアイコンコンポーネントを指定して呼び出せます。 |
exProps | 外部のアイコンコンポーネントに渡すpropsを指定できます。 |
icon | アイコンを指定できます。指定した内容によって出力が変わります。 |
emoji | emoji用のクラスを付与して、指定した絵文字をそのまま出力します。 |
size | プリセットアイコンを呼び出す場合、width, heightとして出力されます。 |
scale —scale | アイコンの scale を指定できます。css変数で出力されます。 |
label aria-label | aria-labelとして出力します。指定があればrole="img"が同時に出力され、指定がない場合はaria-hidden="true"が出力されます。 |
Import
import { Icon } from '@lism-ui/core';Usage
外部のパッケージを利用する方法
<Icon>コンポーネントでもas&exPropsが使用できます。
これにより、react-icons,@phosphor-icons/reactなどのサードパーティパッケージを<Icon>を通して展開することができます。
asに指定するimport { Smiley } from "@phosphor-icons/react";import { Icon } from '@lism-ui/core';
<Icon as={Smiley} c='black' fz='2rem'/>この時、外部コンポーネントであるSmileyで使えるプロパティを明示的に外部用のプロパティとして指定してする場合は、exPropsを利用します。
Smiley用のプロパティを指定する<Icon as={Smiley} exProps={{ weight:'fill', size:'3em' }} c='blue' />exPropsに私たプロパティは、Lism側で処理されなくなります。
現状weight,sizeは Lism Propsには存在しないプロパティ名なので、exPropsを使う必要はないですが、今後のアップデートで同名のプロパティが追加された場合でも影響を受けません。
as, exProps のを icon にまとめて指定する
<Icon>では、以下のような形式でas, exPropsを指定することもできます。
<Icon icon={{as:Component, ...exProps}} ... />iconにas, exPropsを一括指定する<Icon icon={{as:Smiley, weight:'fill', size:'3em'}} c='blue' />Lism UI に内包されたアイコンを呼び出す方法
Lismパッケージ内にはいくつかsvgアイコンを内包しています。
icon='icon-name'と指定することで、それらのアイコンを呼び出すことができます。
（Phosphor Icons を使わせていただいています。）
x menu check ban alert warning question info good bad heart star book note lightbulb link cart caret-down caret-down-fill 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を直接記述する
<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>has—mask との併用
<Icon>で （hasMask(.shas--mask) を使う例を紹介します。
<Icon fz='4xl' hasMask='<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><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>'/>※ 出力時にはbase64にエンコードされます。
Variants
variant='inline'
variant='inline' を 指定すると、.a--icon--inlineクラスも出力されます。
.a--icon--inlineに対しては次のようなCSSが適用されており、インラインで文字と並んでも見やすくなるような調整がデフォルトで入っています。
.a--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>