Nuxt mdi

从 Material Design Icons 添加 7,000 多个图标到您的 Nuxt 项目。

功能

添加 7,000 多个图标，来自 Material Design Icons。
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 语言功能 (Volar) 扩展来获取 Vue 组件的 IntelliSense。