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" />

Props

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。