Icons

apps/website で利用しているアイコンの設計指針です。

Usage

HTMLで利用

HTMLで利用する場合は、ui:iconコンポーネントを利用します。

Source Code

<ui-icon data-icon="external-link"></ui-icon>

CSSで利用

CSSで利用する場合は、SVGファイルを直接CSSファイル内で読み込んで利用が可能です。

background-image: url(/assets/icons/xxxx.svg);

Icon List

• calendar
• chevron-down
• chevron-first
• chevron-last
• chevron-left
• chevron-right
• chevron-up
• circle-check
• circle-chevron-down
• circle-chevron-left
• circle-chevron-right
• circle-chevron-up
• circle-minus
• circle-plus
• clock
• ellipsis
• external-link
• file-text
• globe
• info
• map-pin
• search
• triangle-alert
• x

Icon の追加

• ベースのアイコンセットは、Lucideを利用しています。
• アイコン作成ルールは、Icon Design Guideを参考にして下さい。

Lucide Icon

1. Lucideから利用するSVGファイルをダウンロードし、アセットフォルダに格納して下さい。
2. その後、cssファイルに記述を追加します。

独自 Icon

1. アイコン作成ルールに沿ったうえで、24x24px のSVGファイルを作成し、アセットフォルダに格納して下さい。
2. その後、cssファイルに記述を追加します。