Vue使用iconify图标

1、安装插件purge-icons-webpack-plugin

yarn add purge-icons-webpack-plugin -D

或者

npm i purge-icons-webpack-plugin -D

2、配置插件

在vue.config.js文件中配置插件使用。

// vue.config.js
 
const { PurgeIcons } = require('purge-icons-webpack-plugin');
 
module.exports = { 
 
  chainWebpack: config => {
    config.plugin('purgeIcons').use(PurgeIcons).tap(args => {
      return args
    })
  },
 
};

1、安装插件purge-icons-webpack-plugin

yarn add purge-icons-webpack-plugin -D

或者

npm i purge-icons-webpack-plugin -D

2、配置插件

在vue.config.js文件中配置插件使用。

// vue.config.js
 
const { PurgeIcons } = require('purge-icons-webpack-plugin');
 
module.exports = { 
 
  chainWebpack: config => {
    config.plugin('purgeIcons').use(PurgeIcons).tap(args => {
      return args
    })
  },
 
};

在main.ts文件中import ‘@purge-icons/generated’

// main.ts
import '@purge-icons/generated'

3、使用Icon

import { Icon } from '@iconify/vue';
 
<Icon icon="mdi-light:home" />

  查看全文

首次访问，人机识别

扫描下方二维码回复 程序员 获取解锁验证码

步骤：[ 打开微信 ]->[ 扫描上方二维码 ]->[ 关注 程序进阶之路 的公众号] 输入 程序员 获取验证码，即可解锁文章。

验证码：

确定