vite-plugin-iconify-preset

vite-plugin-iconify-preset

100+流行的集合超过10,000图标，标志，表情符号等。Iconify提供支持。

支持vite构建的vue2、vue3、react项目

该包是为了弥补<i-ant-design-caret-down-filled />这种按需引入的不足，这种写法很好用，但在项目中往往需要<Icon class="icon" :name="name" :width="width" :height="height" />这种写法，并把将要用到的图标预先设置好将其打包。例如图标显示哪一个，需要从接口中获取。模版中按需引入的（<i-ant-design-caret-down-filled />）写法此时无法满足需求，于是写了此包。

安装

  npm i vite-plugin-iconify-preset

预设配置

 // vite.config.ts
 import Icon from 'vite-plugin-iconify-preset'

  plugins: [
    ...,
    Icon([
      'ant-design:linkedin-outlined',
      'ant-design:ant-design-outlined'，
      ...
    ])
  ]

组件使用

// vue3
import { Icon } from 'vite-plugin-iconify-preset/vue'
// vue2
import { Icon } from 'vite-plugin-iconify-preset/vue2'
components: {
  Icon
}

<Icon
  class="icon"
  :name="name"
  :width="width"
  :height="height"
/>

// react
import { Icon } from 'vite-plugin-iconify-preset/react'

<Icon
  className="icon"
  name={name}
  width={width}
  height={height}
/>

报错问题

找不到模块“vite-plugin-iconify-preset/vue”或其相应的类型声明 如果出现这样的编辑器报错，可在tsconfig文件下include配置".d.ts"，在".d.ts"文件内声明：declare module 'vite-plugin-iconify-preset/vue' （react 亦此）

icon图标地址

https://icones.netlify.app/

联系方式

邮箱: [e-mail] 如发现问题或是有疑惑请联系作者