アイコン

ミソラコネクト専用のアイコンセットです。SVGスプライトとアイコンフォントの両形式を提供し、 モダンなシステムからレガシーシステム（Visualforce等）まで対応しています。

💡 ヒント：アイコンをクリックすると、アイコン名がクリップボードにコピーされます。

アイコン一覧

汎用アイコン

arrow-right
arrow-left
arrow-up
arrow-down
check
close
menu
search
plus
minus

ミソラコネクト専用アイコン

wifi
signal
sim-card
smartphone
antenna

サイズ

アイコンは5つのサイズバリエーションを提供しています。

.mi-xs (12px)
.mi-sm (16px)
.mi-md (24px)
.mi-lg (32px)
.mi-xl (48px)
HTML 
<svg class="misora-icon mi-xs">...</svg>
<svg class="misora-icon mi-sm">...</svg>
<svg class="misora-icon mi-md">...</svg>
<svg class="misora-icon mi-lg">...</svg>
<svg class="misora-icon mi-xl">...</svg>

カラー

アイコンはカラークラスで色を変更できます。

.mi-primary
.mi-accent
.mi-success
.mi-warning
.mi-error
HTML 
<svg class="misora-icon mi-lg mi-primary">...</svg>
<svg class="misora-icon mi-lg mi-accent">...</svg>
<svg class="misora-icon mi-lg mi-success">...</svg>
<svg class="misora-icon mi-lg mi-warning">...</svg>
<svg class="misora-icon mi-lg mi-error">...</svg>

SVG使用方法

方法1: インラインSVG（推奨）

最も柔軟な方法です。CSSでスタイルを完全に制御できます。

HTML 
<svg class="misora-icon mi-md" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M12 20h.01"/>
  <path d="M2 8.82a15 15 0 0 1 20 0"/>
  <path d="M5 12.859a10 10 0 0 1 14 0"/>
  <path d="M8.5 16.429a5 5 0 0 1 7 0"/>
</svg>

方法2: SVGスプライト

複数のアイコンを使用する場合、スプライトファイルを読み込んで使用できます。

HTML 
<!-- スプライトを読み込み（ページの先頭に1回） -->
<svg style="display:none">
  <use href="../assets/icons/sprite/misora-icons.svg"></use>
</svg>

<!-- アイコン使用 -->
<svg class="misora-icon mi-md">
  <use href="#wifi"></use>
</svg>

<svg class="misora-icon mi-md">
  <use href="#signal"></use>
</svg>

方法3: 個別SVGファイル

imgタグで読み込むこともできますが、CSSによる色の変更はできません。

HTML 
<img src="../assets/icons/svg/wifi.svg" alt="WiFi" width="24" height="24">

アイコンフォント使用方法

レガシーシステムやIE対応が必要な場合はアイコンフォントを使用できます。

セットアップ

アイコンフォント用CSSを読み込みます。

HTML 
<link rel="stylesheet" href="../assets/icons/font/misora-icons.css">

使用方法

<i>タグまたは<span>タグにクラスを指定します。

HTML 
<!-- 基本的な使用方法 -->
<i class="icon-wifi"></i>
<i class="icon-signal"></i>

<!-- サイズ指定（font-size で調整） -->
<i class="icon-wifi" style="font-size: 2rem;"></i>

<!-- カラー指定（color で調整） -->
<i class="icon-check" style="color: var(--color-success);"></i>

利用可能なアイコンクラス

Classes 
.icon-antenna
.icon-arrow-down
.icon-arrow-left
.icon-arrow-right
.icon-arrow-up
.icon-check
.icon-close
.icon-menu
.icon-minus
.icon-plus
.icon-search
.icon-signal
.icon-sim-card
.icon-smartphone
.icon-wifi

Visualforce での使用

Salesforce Visualforce ページでのアイコン使用方法です。

静的リソースとして登録

アイコンフォントファイルを静的リソースとしてアップロードします。

Visualforce 
<apex:page>
  <!-- アイコンフォントCSSを読み込み -->
  <apex:stylesheet value="{!$Resource.MisoraDesignSystem}/icons/font/misora-icons.css"/>

  <!-- またはデザインシステム全体を読み込み -->
  <apex:stylesheet value="{!$Resource.MisoraDesignSystem}/misora-design-system.min.css"/>

  <!-- アイコン使用 -->
  <i class="icon-wifi" style="font-size: 2rem; color: var(--color-primary);"></i>
  <i class="icon-signal" style="font-size: 1.5rem;"></i>
  <i class="icon-sim-card" style="font-size: 1.5rem;"></i>
</apex:page>