Nuxt mdi

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

• ✨ 发行说明
• 🏀 在线 Playground
• 📖  文档

特性

• 添加来自 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。