Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”

In everyday development, we may need tools to improve efficiency or to solve problems in a different way. Without further ado, let’s cut to the chase!

Who is it

When it comes to ICONS, it’s hard to get around IconFont. Today’s introduction is iconPark, an open source icon library from Byte

website

IconPark official icon library provides 2437 ICONS, can meet the use of most scenarios compared to IconFont give me the most intuitive feeling is the unity of the icon is strong, clear classification, the most important is very powerful, this icon library can be used in Vue/React end, because I use the Vue technology stack in work, IconPark was recently used in the Vue3 project, so let’s talk about it.

Note: The following examples are only used in the Vue3 project. The use of Vue2.X is similar, please read the official documentation

How to use

Here we use the NPM package to introduce, first we need to build a Vue3 project (using Webpack)

NPM install

npm install @icon-park/vue-next

According to the need to introduce

Go to babel.config.js in the project root directory and add the following code

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'].plugins: [['import',
      {
        libraryName: '@icon-park/vue-next'.libraryDirectory: 'es/icons'.camel2DashComponentName: false
      },
      'icon'      // Add this attribute to multiple component libraries.]]}Copy the code

Note that if you are importing multiple component libraries on demand, you will need to specify the name of the component library, otherwise an error will be reported.

get

Since it might be unsightly to have a lot of component code in main.js, I’ll pull it out and maintain it in a JS

Add the plugins directory to the SRC directory, import and register using ES6 syntax

import { Play } from '@icon-park/vue-next'
export function IconPark (app) {
  app.component('Play', Play)
}
Copy the code

In the main. Js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import { IconPark } from '@/plugins/iconPark'
const app = createApp(App)
IconPark(app)
app.use(store).use(router).mount('#app')

Copy the code

As you can see, the above IconPark function into a parameter app, perform the app.com ponent, the introduction of the icon in the form of components are registered globally, so means that these ICONS will be used in the form of components.

An icon

<play theme="filled" size="60" fill="#3a5de7" />

Render to the page

Of course, the official website provides flexible configuration of color, size, format and so on. You can choose by yourself. If you think the more than 2000 ICONS are not enough, or if you don’t have what you want, you can give the official supplementary suggestions. Okay, that’s it.