plugin-iconify

pengzhanbo

200字小于1分钟

2024-03-13

指南

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

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

安装

npm

npm install @vuepress-plume/plugin-iconify

yarn

yarn add @vuepress-plume/plugin-iconify

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
}

效果：