图标使用之iconify和组件编写

我们可以通过Icones找到各类图标库，如ElementPlus、AntDesign都可以找到，这类图标库可以在Npm使用这个命名规则找到对应的包:

@iconify/ant-design
@iconify/ep

接着我们只需要引入这些包，然后在组件使用时按需引入即可(您还要在您的项目中提供SVG的Plugin支持)

在线引入

编写一个TSX组件

import { defineComponent } from "vue"
import { Icon } from '@iconify/vue'

export default defineComponent({
  name: 'hIcon',
  props: {
    icon: {
      type: String,
      default: ""
    },
  },
  render() {
    return <Icon {...this.$attrs} icon={this.icon} />
  }
})

然后我们使用就传入复制的图标名即可：

<useIcon icon="logos:vue" width="100px" height="100px" />

本地引入

通过之前提到的单独引用对应的图标库到本地后，直接进行导入使用即可

//import check from '@iconify-icons/ep/check'
<useIcon :icon="check" />

本地图标

使用 vite-svg-loader