vuepress-theme-plume/docs/notes/plugins/iconify.md

title, author, createTime, permalink

title	author	createTime	permalink
plugin-iconify	pengzhanbo	2024/03/13 17:28:25	/plugins/plugin-iconify/

指南

添加 iconify 图标库支持。并注入全局组件 <Iconify>

支持 iconify 所有图标，支持通过 icon name 加载图标，可在iconify search 搜索图标使用。

安装

::: code-tabs @tab npm

npm install @vuepress-plume/plugin-iconify

@tab:active yarn

yarn add @vuepress-plume/plugin-iconify

@tab pnpm

pnpm add @vuepress-plume/plugin-iconify

:::

使用

// .vuepress/config.ts
import iconifyPlugin from '@vuepress-plume/plugin-iconify'
module.exports = {
  // ...
  plugins: [
    iconifyPlugin({
      componentName: 'Iconify'
    })
  ]
  // ...
}

Options

interface IconifyOptions {
  /**
   * 组件名，
   * @default `Iconify`
   */
  componentName?: string
  /**
   * 默认图标颜色
   * @default `currentColor`
   */
  color?: string
  /**
   * 图标大小
   * @default '1em'
   */
  size?: string | number
}

Component

<template>
  <Iconify name="material-symbols:home" color="currentColor" size="1em" />
</template>

Props

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
}

效果：