Last Updated: 2/6/2024, 5:44:57 AM

# Vuetify の v-icon ってなに？

この記事は、公式サイトに書かれている内容を元に、全体像を俯瞰するために書きました。

# 1. v-icon とは

様々な Web アイコンフォントを使えるようにしてくれます。

Icons - Vuetify (opens new window)
v-icon コンポーネントは、あなたのアプリケーションの様々な場面に応じて多くのアイコンを提供します。

# 2. 使いかた

v-icon タグで囲んで使いたいWeb アイコンフォントの名前を書くだけです。 色々な種類の Web アイコンフォントが使えます。種類に合わせて命名規則があります。

<!-- 
    Material Design Icons
    頭に mdi- が必要
  -->
<v-icon>mdi-search</v-icon>

<!--
    Material Icons
    頭にはなにもいらない。
  -->
<v-icon>search</v-icon>

<!--
    Font Awsome
    頭に fas fa- が必要
  -->
<v-icon>fas fa-search</v-icon>

使えるアイコンの種類の一覧については、公式サイトのここに書かれています。

# ◯ 注意したいこと - v-icon が表示されないときは

アイコンを使うには、アイコンを「ダウンロード」して、Vuetify を「設定」する必要があります。 逆に言えば、「ダウンロード」して「設定」しないと使えません。 「ダウンロード」と「設定」については、後述いたします。

# 3. 使えるもの

世の中いろんなおしゃれなアイコンがありますが Vuetify の v-icon の説明で書かれているのは、以下の通りです。

  1. Material Design Icons (opens new window)
  2. Material Design Icons (JS SVG) (opens new window)
  3. Material Icons (opens new window)
  4. Font Awsome 5 (opens new window)
  5. Font Awesome 4
  6. Awesome SVG Icons

# ◯ 例えば...

Vue CLI 3 から Vuetify をインストールするときに...

$ vue add vuetify

Default ではなく Configure を指定すると...

? Choose a preset:
  Default (recommended)
  Prototype (rapid development)
❯ Configure (advanced)

好きなアイコンの種類を選んでね ? Select icon font と聞かれます。

? Choose a preset: Configure (advanced)
? Use a pre-made template? (will replace App.vue and HelloWorld.vue) No
? Use custom theme? No
? Use custom properties (CSS variables)? No
? Select icon font (Use arrow keys)
❯ Material Design Icons 
  Material Icons 
  Font Awesome 5 
  Font Awesome 4

最初は、アイコンに種類があることさえ知らなかったので、 選んでねって言われても... って気分になりました笑

# ◯ 注意したいこと

Material Design Icons と Material Icons は、 名前が似ていますが別物なので注意してください。

# 4. 使えるようにする方法

ここは公式サイトの以下の記事を参考にしています。 リンク先に Web アイコンフォントごとに設定の仕方が書かれているので、ご確認ください。

ここでは Material Design Icons について詳述します。 大きく分けて、下記２つのやり方が存在します。

# (1) HTML にベタ書きする場合

想定する結果

コードはここにあります。 ローカルに保存して、ブラウザで見ることができます。

# Step 0.

公式ドキュメントのコードを書き換える形で持っていきます。

# Step 1. ダウンロード

link タグで使用する Web アイコンフォントを指定して CDN 経由でダウンロードさせます。

<link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">

# Step 2. 設定

使用する Web アイコンフォントの種類を指定します。

<script>
  new Vue({
    el: '#app',
    vuetify: new Vuetify({
      icons: {
        iconfont: 'mdi'
      }
    }),
    ...
  })
</script>

# (2) webpack で build する場合

前節では Material Design Icons で確認しました。 ここでは Material Icons で確認したいと思います。 vue-cli を通して「ダウンロード」と「設定」の仕方を確認します。 これにはコードはなく、手順のみ示します。

# Step 0.

  1. vue-cli で作成したとします。
$ vue create vuetify-sample
  1. デフォルトを選択します。
Vue CLI v3.10.0
┌───────────────────────────┐
│  Update available: 4.0.5  │
└───────────────────────────┘
? Please pick a preset: (Use arrow keys)
❯ default (babel, eslint) 
  Manually select features
  1. vue-cli で Vuetify を追加します。
$ cd vuetify-sample
$ vue add vuetify
  1. Configure を選択します。Default だと Material Design Icons がインストールされてしまうので。
? Choose a preset:
  Default (recommended)
  Prototype (rapid development)
❯ Configure (advanced)
  1. icon font で Material Icons を選択する以外は、規定値を指定します。 (Y/n) なら Y が (y/N)　なら N が規定値のはずです。
? Choose a preset: Configure (advanced)
? Use a pre-made template? (will replace App.vue and HelloWorld.vue) (Y/n) Yes
? Use custom theme? (y/N) No
? Use custom properties (CSS variables)? (y/N) No
? Select icon font 
  Material Design Icons (Default)
❯ Material Icons 
  Font Awesome 5 
  Font Awesome 4 
? Use fonts as a dependency (for Electron or offline)? (y/N) No
? Use a-la-carte components? (Y/n) Yes
? Select locale English

作業が完了すると、ディレクトリの構成は以下の様な具合になります。

$ tree -I node_modules
.
├── README.md
├── babel.config.js
├── package.json
├── public
│   ├── favicon.ico
│   └── index.html  <--- ここでダウンロード
├── src
│   ├── App.vue
│   ├── assets
│   │   ├── logo.png
│   │   └── logo.svg
│   ├── components
│   │   └── HelloWorld.vue
│   ├── main.js
│   └── plugins
│       └── vuetify.js  <--- ここで設定
├── vue.config.js
└── yarn.lock
$

# Step 1. ダウンロード

public/index.html を開くと link タグで CDN からダウンロードする設定が入っているのがわかります。 前節では Material Design Icons へのリンクが記述されていたのと比較して見てください。

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons">

また URL を見るとわかるのですが Material Icons は Google が提供してくれている様です。 ありがたいです。

# Step 2. 設定

src/plugins/vuetify.js を開くと md, Material Icons が指定されているのがわかります。 ここでは色々と名前が紛らわしいです。

// index.html で link タグを使わず
// ダウンロードして含めることもできる。
// $ yarn add material-design-icons-iconfont -D
// 
// その場合は、ここで import する。
// import 'material-design-icons-iconfont/dist/material-design-icons.css' // Ensure you are using css-loader
import Vue from 'vue'
import Vuetify from 'vuetify/lib'

// 2) 使用する iconfont を指定する。
Vue.use(Vuetify)
export default new Vuetify({
  icons: {
    iconfont: 'md'
  }
})

src/main.js で Vuetify のインスタンスを Vue に設定します。

import Vue from "vue"
import App from './App.vue'
import vuetify from './plugins/vuetify.js'

new Vue({
  vuetify,
  render: h => h(App),
}).$mount("#app");

# ◯ 考え方

繰り返しになりますが v-icon を使うには準備が必要です。 Web フォントアイコンを「ダウンロード」して、 Vuetify の「設定」をしないといけません。

もし v-icon が表示されない場合は、 「ダウンロード」か「設定」のうちいずれかをしていない可能性があります。

# ◯ 疑問に思ったこと

Vuetify のデフォルトは、「Material Design Icons」です。 しかし、接頭辞が無いのは「Material Icons」というのは、不思議な感じです。

# 5. そのほか

# ◯ Materiarize

Materiarize と言う綺麗な icon を見つけたのですが、やめた方が良さそうとのこと。ありがとうございます。

# ◯ 勉強になったこと

CSS の import の仕方

@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');

html, body {
  font-family: 'Roboto Condensed', sans-serif;
}

#app {
  font-family: 'Roboto Condensed', sans-serif;
}

Vue.js の Single File Component(SFC) を使いつつ CDN でアインコンのフォントを使えるようにするには、こういう逃げ方もあるのかもしれません。

Vuetify の v-icon ってなに？
← Vue.js の関数型コンポーネント VuePress で ブログカードを作りたい →