此页内容

约 228 字小于 1 分钟

2023-02-26

npm versionnpm total downloadsnpm yearly downloadsgithub source

指南

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

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

安装

yarn
yarn 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
}

效果: