101 lines
1.5 KiB
Markdown
101 lines
1.5 KiB
Markdown
---
|
|
title: plugin-iconify
|
|
author: pengzhanbo
|
|
createTime: 2024/03/13 17:28:25
|
|
permalink: /plugins/plugin-iconify/
|
|
---
|
|
|
|
## 指南
|
|
|
|
添加 `iconify` 图标库支持。并注入全局组件 `<Iconify>`
|
|
|
|
支持 iconify 所有图标，支持通过 icon name 加载图标，可在[iconify search](https://icon-sets.iconify.design/) 搜索图标使用。
|
|
|
|
## 安装
|
|
|
|
::: code-tabs
|
|
@tab npm
|
|
|
|
``` sh
|
|
npm install @vuepress-plume/plugin-iconify
|
|
```
|
|
|
|
@tab:active yarn
|
|
|
|
``` sh
|
|
yarn add @vuepress-plume/plugin-iconify
|
|
```
|
|
|
|
@tab pnpm
|
|
|
|
``` sh
|
|
pnpm add @vuepress-plume/plugin-iconify
|
|
```
|
|
|
|
:::
|
|
|
|
## 使用
|
|
|
|
```ts
|
|
// .vuepress/config.ts
|
|
import iconifyPlugin from '@vuepress-plume/plugin-iconify'
|
|
module.exports = {
|
|
// ...
|
|
plugins: [
|
|
iconifyPlugin({
|
|
componentName: 'Iconify'
|
|
})
|
|
]
|
|
// ...
|
|
}
|
|
```
|
|
|
|
### Options
|
|
|
|
```ts
|
|
interface IconifyOptions {
|
|
/**
|
|
* 组件名，
|
|
* @default `Iconify`
|
|
*/
|
|
componentName?: string
|
|
/**
|
|
* 默认图标颜色
|
|
* @default `currentColor`
|
|
*/
|
|
color?: string
|
|
/**
|
|
* 图标大小
|
|
* @default '1em'
|
|
*/
|
|
size?: string | number
|
|
}
|
|
```
|
|
|
|
## Component
|
|
|
|
```vue
|
|
<template>
|
|
<Iconify name="material-symbols:home" color="currentColor" size="1em" />
|
|
</template>
|
|
```
|
|
|
|
### Props
|
|
|
|
```ts
|
|
interface Props {
|
|
name?: string
|
|
size?: string | number
|
|
color?: string
|
|
mode?: 'style' | 'svg' | 'mask' | 'bg'
|
|
style?: StyleValue
|
|
flip?: string
|
|
vFlip?: boolean
|
|
hFlip?: boolean
|
|
inline?: boolean
|
|
rotate?: number
|
|
}
|
|
```
|
|
|
|
效果： <Iconify name="material-symbols:home" color="currentColor" size="1em" />
|