Nuxt mdi

從 Material Design Icons 為您的 Nuxt 專案新增 7,000 多個圖示。

功能

從 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 軸上翻轉圖示。

設定

您可以透過將 mdi 區段新增到 nuxt.config.ts 檔案來設定此模組。

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。