Nuxt mdi

Material Design Icons から、7,000以上のアイコンを Nuxt プロジェクトに追加します。

特徴

Material Design Icons から、7,000 以上のアイコンを追加。
TypeScript の補完。
インポートは不要です。

はじめに

インストール

お好みのパッケージマネージャーを使用して、プロジェクトに nuxt-mdi 依存関係をインストールします。

npx nuxi@latest module add nuxt-mdi

### Activation

Add `'nuxt-mdi'` to the `modules` section of your `nuxt.config.ts` file.

```ts
export default defineNuxtConfig({
  modules: [
    'nuxt-mdi'
  ]
})

以上です！これで Nuxt アプリで nuxt-mdi を使用できます ✨

使い方

モジュールは、MdiIcon コンポーネントを自動的にアプリで利用できるようにします。以下のように使用できます

<MdiIcon icon="mdiAccount" />

プロパティ

icon (文字列、必須): 表示するアイコンの名前。
size (文字列、デフォルト: '1em'): アイコンのサイズを設定します。デフォルトは 1em です。
flipX (真偽値、デフォルト: false): アイコンをX軸で反転させます。
flipY (真偽値、デフォルト: false): アイコンをY軸で反転させます。

設定

nuxt.config.ts ファイルに mdi セクションを追加することで、このモジュールを設定できます。

export default defineNuxtConfig({
  // ...
  mdi: {
    componentName: 'MdiIcon',
    defaultSize: '1em'
  }
})

コンポーネント名: `componentName`

デフォルトでは、コンポーネント名は MdiIcon です。componentName オプションを設定することで変更できます。

export default defineNuxtConfig({
  // ...
  mdi: {
    componentName: 'MyIcon'
  }
})

<MyIcon icon="mdiAccount" />

デフォルトサイズ: `defaultSize`

デフォルトでは、アイコンは 1em でレンダリングされます。defaultSize オプションを設定することで変更できます。

アイコン

利用可能なアイコンは、Material Design Icons ウェブサイトで確認できます。IntelliSense が、利用可能なアイコンの自動補完を自動的に表示します。

VS Code を使用している場合は、Vue Language Features (Volar) 拡張機能を使用して、Vue コンポーネントの IntelliSense を取得できます。