vue 使用 icon-park

前言

项目开发中，经常会用到一些 icon 图标库，本文主要记录下 IconPark 图标库的安装与使用。

1、安装

npm install @icon-park/vue-next --save

2、使用

<template>
<home theme="filled"/>
</template>
<script>
import {Home} from '@icon-park/vue-next';

export default {
    components: {
        Home
    }
}
</script>

3、全局安装

// main.ts

import { createApp } from 'vue'
import App from './App.vue'
import { install } from '@icon-park/vue-next/es/all'

const app = createApp(App)

install(app) // 使用默认前缀“ icon”，例如：icon是People，名称是icon-people

app.mount('#app')

使用

<icon-home />

4、按需加载

// babel.config.js

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  // ant-design-vue 按需加载
  plugins: [
    [
      'import',
      {
        libraryName: '@icon-park/vue-next',
        libraryDirectory: 'es/icons',
        camel2DashComponentName: false 
      }
    ]
  ]
}

// main.ts

import { createApp } from 'vue'
import App from './App.vue'

import '@icon-park/vue-next/styles/index.css'

import { Box } from '@icon-park/vue-next'

const app = createApp(App)

app.component('IconBox', Box)

app.mount('#app')

使用

<IconBox />

5、单独提出为一个配置文件

新建plugins/iconPark.ts

import { App } from 'vue'

import { Edit, Ppt, Helpcenter } from '@icon-park/vue-next'

export default {
  install(app: App) {
    app.component('IconEdit', Edit) // 编辑
    app.component('IconPpt', Ppt) // 幻灯片
    app.component('IconHelpcenter', Helpcenter)
  }
}

// main.ts

import { createApp } from 'vue'
import App from './App.vue'

import '@icon-park/vue-next/styles/index.css'

import IconPark from '@/plugins/iconPark'

const app = createApp(App)

app.use(IconPark)

app.mount('#app')

完