• 様々な解像度に対応するためにアイコンはすべて SVG 形式です。
  • アイコンのディフォルトサイズは横幅24px 高さ24px。
  • アイコンは /images/sprite.svg としてひとつにまとまっています。
  • すべてのアイコンには、.mt-icon を記述します。
  • 個々のアイコンは /images/icons/ に保管されています。
  • SVG には alt 属性がありませんが、代わりに title 属性に適切な情報を追加してください。

アイコンセット

ID名を記述することで指定のアイコンを表示させることができます。

#ic_add 追加
#ic_addhtml HTML追加
#ic_addpage ページ追加
#ic_aligncenter 中央配置
#ic_alignleft 左配置
#ic_alignnone 配置設定なし
#ic_alignright 右配置
#ic_asset アセット
#ic_audio オーディオ
#ic_backgroundcolor 背景色
#ic_blank 空白
#ic_bold 太字
#ic_box
#ic_build 再構築
#ic_category カテゴリ
#ic_caution 警告
#ic_checkbox チェックボックス
#ic_clock 時間
#ic_code コード
#ic_collapse 開閉
#ic_comment コメント
#ic_contentdata コンテンツデータ
#ic_contentstype コンテンツタイプ
#ic_crop 切り取る
#ic_crossoff 取り消し線
#ic_customfield カスタムフィールド
#ic_dashboard ダッシュボード
#ic_date 日付
#ic_design デザイン
#ic_dot ドット
#ic_download ダウンロード
#ic_draft 下書き
#ic_duplicate 複製
#ic_edit 編集
#ic_eraser 消去
#ic_error エラー
#ic_fav お気に入り
#ic_feedback フィードバック
#ic_file ファイル
#ic_filter フィルター
#ic_flag フラッグ
#ic_fliph 左右反転
#ic_flipv 上下反転
#ic_fullscreen フルスクリーン
#ic_gallery ギャラリー
#ic_grid グリッド
#ic_group グループ
#ic_header ヘッダー
#ic_htmlmode HTMLモード
#ic_hr HR
#ic_image 画像
#ic_indent 字下げを増やす
#ic_info 情報
#ic_italic 斜体
#ic_link リンク追加
#ic_list リスト
#ic_lock ロック
#ic_mail メール
#ic_member メンバー
#ic_menu メニュー
#ic_menuhamburger ハンバーガーメニュー
#ic_minus マイナス
#ic_remove 減らす
#ic_move 移動(UI)
#ic_movie 動画
#ic_mt Movable Type
#ic_multiline 複数行インプット
#ic_ol 順序のあるリスト
#ic_permalink パーマリンク
#ic_plugin プラグイン
#ic_plus プラス
#ic_preview プレビュー
#ic_publish 公開
#ic_quotation 引用
#ic_radio ラジオボタン
#ic_redo やり直す
#ic_reload 再読み込み
#ic_replace 置換
#ic_related 関連
#ic_role ロール
#ic_rss RSS
#ic_search 検索
#ic_selectbox セレクトボックス
#ic_setting 設定
#ic_singleline 1行インプット
#ic_sites サイト
#ic_statusdraft 下書きステータス
#ic_stop 停止
#ic_success 成功
#ic_system システム
#ic_tag タグ
#ic_template テンプレート
#ic_textcolor 文字色
#ic_textbigger テキスト(大)
#ic_textsmaller テキスト(小)
#ic_time 時間
#ic_tool ツール
#ic_trackback トラックバック
#ic_trash ゴミ箱
#ic_tri-down 下向き三角
#ic_tri-left 左向き三角
#ic_tri-right 右向き三角
#ic_tri-up 上向き三角
#ic_undo 元に戻す
#ic_underline 下線
#ic_unindent 字下げを減らす
#ic_user ユーザー
#ic_user-auth 承認済みユーザー
#ic_user-open ユーザー情報パネルの開閉
#ic_unlink リンク削除
#ic_upload アップロード
#ic_wysiwyg WYSIWYGモード
// 追加アイコン
<svg title="追加" role="img" class="mt-icon"><use xlink:href="../images/sprite.svg#ic_add" /></svg>
  
// タグアイコン
<svg title="タグ" role="img" class="mt-icon"><use xlink:href="../images/sprite.svg#ic_tag" /></svg>

色バリエーション

ボタンと同じカラーテーマでアイコンの色を変えることができます。
mt-icon--inverse を記述すると白色のアイコンになります。

<svg title="Favorite" role="img" class="mt-icon"><use xlink:href="../images/sprite.svg#ic_fav"/></svg>
<svg title="Favorite" role="img" class="mt-icon--primary"><use xlink:href="../images/sprite.svg#ic_fav"/></svg>
<svg title="Favorite" role="img" class="mt-icon--secondary"><use xlink:href="../images/sprite.svg#ic_fav"/></svg>
<svg title="Favorite" role="img" class="mt-icon--success"><use xlink:href="../images/sprite.svg#ic_fav"/></svg>
<svg title="Favorite" role="img" class="mt-icon--info"><use xlink:href="../images/sprite.svg#ic_fav"/></svg>
<svg title="Favorite" role="img" class="mt-icon--warning"><use xlink:href="../images/sprite.svg#ic_fav"/></svg>
<svg title="Favorite" role="img" class="mt-icon--danger"><use xlink:href="../images/sprite.svg#ic_fav"/></svg>
<svg title="Favorite" role="img" class="mt-icon--inverse"><use xlink:href="../images/sprite.svg#ic_fav"/></svg>

サイズバリエーション

アイコンは .mt-icon--sm.mt-icon--lg.mt-icon--xlg を追加することで大きさを変更することができます。

<svg title="Favorite" role="img" class="mt-icon mt-icon--sm"><use xlink:href="../images/sprite.svg#ic_fav"/></svg>
<svg title="Favorite" role="img" class="mt-icon"><use xlink:href="../images/sprite.svg#ic_fav"/></svg>
<svg title="Favorite" role="img" class="mt-icon mt-icon--lg"><use xlink:href="../images/sprite.svg#ic_fav"/></svg>
<svg title="Favorite" role="img" class="mt-icon mt-icon--xlg"><use xlink:href="../images/sprite.svg#ic_fav"/></svg>

アイコンバッジ

ユーザーアイコンに添えるバッジは .mt-user__badge と記述することで実装できます。バッジの色は用途に合わせて変更することができます。

バッジが画像の場合、サイズを 16x16 にリサイズして、.mt-user__badge--img と記述します。画像背景は白を想定しています。

User
User
User
User
User
User
トフ

// ディフォルト
<div class="mt-user">
  <img src="../images/user-default.svg" alt="User" width="48" height="48">
  <div class="mt-user__badge"><svg title="Favorite" role="img" class="mt-icon--inverse mt-icon--sm"><use xlink:href="../images/sprite.svg#ic_fav"/></svg></div>
</div>

// プライマリ
<div class="mt-user">
  <img src="../images/user-default.svg" alt="User" width="48" height="48">
  <div class="mt-user__badge--primary"><svg title="MT User" role="img" class="mt-icon--inverse mt-icon--sm"><use xlink:href="../images/sprite.svg#ic_mt"/></svg></div>
</div>

// 成功・承認
<div class="mt-user">
  <img src="../images/user-default.svg" alt="User" width="48" height="48">
  <div class="mt-user__badge--success"><svg title="Checked" role="img" class="mt-icon--inverse mt-icon--sm"><use xlink:href="../images/sprite.svg#ic_checkbox"/></svg></div>
</div>

// 注意
<div class="mt-user">
  <img src="../images/user-default.svg" alt="User" width="48" height="48">
  <div class="mt-user__badge--warning"><svg title="Stop" role="img" class="mt-icon--inverse mt-icon--sm"><use xlink:href="../images/sprite.svg#ic_error"/></svg></div>
</div>

// 警告・中止
<div class="mt-user">
  <img src="../images/user-default.svg" alt="User" width="48" height="48">
  <div class="mt-user__badge--danger"><svg title="Stop" role="img" class="mt-icon--inverse mt-icon--sm"><use xlink:href="../images/sprite.svg#ic_stop"/></svg></div>
</div>

// 画像
<div class="mt-user">
  <img src="../images/user-default.svg" alt="User" width="48" height="48">
  <div class="mt-user__badge--img"><img src="../images/toph.png" alt="トフ" width="16" height="16" class="mt-icon--img"></div>
</div>

コンテンツ追加用

MT7のコンテンツ追加 UI には独自の装飾が付いたアイコンを用意してします。クラス名 .mt-icon--contentblock の中に任意のアイコンを加えます。

<div class="mt-icon--contentblock">
  <svg title="ヘッダー" role="img" class="mt-icon mt-icon--sm"><use xlink:href="../images/sprite.svg#ic_header"/></svg>
</div>

コンテンツ ステータス

MT7のコンテンツ追加 UI には独自の装飾が付いたアイコンを用意してします。クラス名 .mt-icon--contentblock の中に任意のアイコンを加えます。

// 公開
<svg title="Published" role="img" class="mt-icon--success mt-icon--sm"><use xlink:href="../images/sprite.svg#ic_checkbox" /></svg>
// 非公開
<svg title="Unpublish" role="img" class="mt-icon--danger mt-icon--sm"><use xlink:href="../images/sprite.svg#ic_stop" /></svg>
// レビュー待ち
<svg title="Review" role="img" class="mt-icon--warning mt-icon--sm"><use xlink:href="../images/sprite.svg#ic_error" /></svg>
// スケジュール
<svg title="Scheduled" role="img" class="mt-icon--info mt-icon--sm"><use xlink:href="../images/sprite.svg#ic_clock" /></svg>
// 下書き
<svg title="Draft" role="img" class="mt-icon mt-icon--sm"><use xlink:href="../images/sprite.svg#ic_draft" /></svg>