图标引进使用大揭秘：摆脱iconfont前缀、创建独有icon图标库

前言

在前端开发中，icon图标无处不在，它可以美化界面、传达信息、引导用户。Element UI 自带的 icon 图标库已经相当壮大了，但是对于实际项目中我们用到的来说，还远远不够。

所以，如何引入且设置成不需要 iconfont 前缀进行使用呢？继续往下看你就知道了。

一、引入第三方图标库

1. 安装第三方图标库

我们以 iconfont 图标库为例，在项目中安装 iconfont 图标库：

npm install iconfont -S

2. 复制代码到项目目录

在项目目录下，找到 iconfont.js 文件，复制代码到项目目录下。

// iconfont.js

// 导入 iconfont 样式表
import 'iconfont/iconfont.css'

// 将 iconfont 注册为全局组件
import { App } from 'vue'

export default {
  install(app: App) {
    app.component('iconfont', {
      render(h) {
        return h('i', {
          class: `iconfont ${this.name}`
        })
      },
      props: {
        name: String
      }
    })
  }
}

3. 在 main.js 中注册 iconfont

在 main.js 文件中，注册 iconfont 组件：

// main.js

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

const app = createApp(App)

app.use(iconfont)

app.mount('#app')

二、摆脱 iconfont 前缀

1. 创建新的 iconfont.json 文件

在项目目录下，新建一个 iconfont.json 文件，并复制以下内容：

{
  "name": "iconfont",
  "version": "1.0.0",
  "description": "iconfont icons",
  "author": "iconfont",
  "license": "MIT",
  "files": [
    "iconfont.js",
    "iconfont.css"
  ],
  "main": "iconfont.js",
  "keywords": [
    "icon",
    "font",
    "iconfont"
  ]
}

2. 修改 package.json 文件

在 package.json 文件中，添加以下内容：

{
  "scripts": {
    "build-iconfont": "webpack --config webpack.iconfont.config.js"
  }
}

3. 创建 webpack.iconfont.config.js 文件

在项目目录下，新建一个 webpack.iconfont.config.js 文件，并复制以下内容：

const path = require('path')

module.exports = {
  entry: './iconfont.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'iconfont.js',
    library: 'iconfont',
    libraryTarget: 'umd',
    globalObject: 'this'
  }
}

4. 运行 npm run build-iconfont 命令

在命令行中，运行 npm run build-iconfont 命令，将 iconfont 图标库打包成一个单独的文件。

5. 在项目中使用 iconfont 图标库

在项目中使用 iconfont 图标库，只需引入 iconfont.js 文件即可。

// main.js

import iconfont from './dist/iconfont.js'

app.use(iconfont)

三、创建独有 icon 图标库

1. 创建新的 iconfont 项目

在本地创建一个新的 iconfont 项目，并初始化 iconfont 项目。

mkdir my-iconfont
cd my-iconfont
iconfont init

2. 将图标添加到项目中

将要使用的图标添加到 iconfont 项目中。

iconfont add

3. 生成图标字体

在 iconfont 项目中，运行 iconfont build 命令，生成图标字体。

iconfont build

4. 将图标字体添加到项目中

将生成的图标字体添加到项目中。

// main.js

import './iconfont/iconfont.css'

5. 在项目中使用图标字体

在项目中使用图标字体，只需在元素上添加 iconfont 类即可。

<i class="iconfont icon-iconfont"></i>

结语

以上就是如何引入第三方图标库、摆脱 iconfont 前缀、创建独有 icon 图标库的方法。希望对大家有所帮助。