iconify图标配置本地化

有时候系统需要在内网加载，那么我们在本地配置了iconify图标，怎么办呢？可以批量iconify图标配置为本地。
在iconify文件夹中，提供了一个’@iconify/json’的npm包，它包含了所有的图标集合的json数据文件(有时候可能线上图标更新了，而本地的版本里面没有更新）

接下来讲述几种方法：
1.也是最简单的办法，导入全部json文件
2.导入全部文件过多，如果我们使用某个图标集里面的文件，可以在main.ts中导入某个图标集，然后加载进去

3.按需导入文件，按需加载项目中使用的图标

const fs = require('fs')
const { lookupCollection } = require('@iconify/json')
const { getIcons } = require('@iconify/utils')
const customIcons = require('./icons.data')

// 1.格式化系统数据，这是使用的框架自带的图标集
const systemIcons = require('../../src/components/Icon/src/data.json')
const resultIcons = {}
Object.keys(systemIcons).forEach((keys) => {
  const key = keys.substring(0, keys.length - 1)
  resultIcons[key] = systemIcons[keys]
})

// 2.添加的数据与内置数据合并，这是另外添加的图标集，将它与框架自带的数据合并
Object.keys(customIcons).forEach((key) => {
  if (!Object.hasOwnProperty.call(resultIcons, key)) {
    resultIcons[key] = customIcons[key]
  } else {
    const set = new Set(resultIcons[key])
    customIcons[key].forEach((i) => set.add(i))

    set.forEach((item) => {
      resultIcons[key].push(item)
    })
  }
})

const getIconSet = async (prefix) => {
  const iconSet = await lookupCollection(prefix)
  return iconSet
}

const run = async () => {
  const iconTypes = Object.keys(resultIcons)
  const result = []
  for (const type of iconTypes) {
    const iconLists = resultIcons[type] || []
    const list = await getIconSet(type)
    const iconSetData = getIcons(list, iconLists)
    result.push(iconSetData)
  }
  const str = JSON.stringify(result)
  fs.writeFileSync(__dirname + '/customIcons.json', str, {
    encoding: 'utf-8'
  })
}

run()

然后在有关iconify中的配置文件，之后再main.ts中引入

// 或者使用本地SVG加载的方式，直接加载图标
// todo:1.制作离线服务
import Iconify from '@purge-icons/generated'
import Locals from '../../../build/iconify/customIcons.json'

for (const idx in Locals) {
  // @ts-ignore
  Iconify.addCollection(Locals[idx])
}

文件结构如下图所示：index即为上述配置

customIcons即为生成的svg图标json文件，

icon.data.js即为项目中的图标集，

const icons = {
  carbon: ['view-filled', 'tree-view-alt', 'rain', 'snow', 'box'],
  mingcute: ['back-fill', 'download-line'],
  fontisto: ['email'],
  'icon-park-outline': ['peoples', 'seal', 'correct'],
  ph: [
    'pencil-simple-line-bold',
    'airplane-light',
    'mountains-fill',
    'trademark-registered-light',
    'mountains-thin',
    'cloud-sun-light',
    'folder-open-light',
    'keyboard-light'
  ]
}
module.exports = icons

这篇文参考了这篇文章svg本地批量加载
在该文中：
我们想要从json目录中读取图标数据，还要用到 @iconify/utils 这个npm包。
下面这段代码就是读取ant-design图标集的json数据

const fs = require('fs');
const { lookupCollection } = require('@iconify/json')
const { getIcons } = require('@iconify/utils')
const antDesignIcons = require('./icons.data')

const getIconSet = async (prefix) => {
  const iconSet = await lookupCollection(prefix)
  return iconSet;
}

const run = async () => {
  const iconSet = await getIconSet('ant-design');
  const antDesignIconsSuffixs = antDesignIcons.map(item => item.split(':')[1]);
  const iconSetData = getIcons(iconSet, antDesignIconsSuffixs);
  const str = JSON.stringify(iconSetData);
  fs.writeFileSync('./ant-design-icon.json', str, {
    encoding: 'utf-8'
  });
}

run();

// icons.data.js
// 想要读取的图标集合
module.exports = [
  'ant-design:account-book-filled',
  'ant-design:account-book-outlined',
  'ant-design:account-book-twotone',
  'ant-design:aim-outlined',
  'ant-design:alert-filled',
  'ant-design:alert-outlined',
  ........ 
  // 以下省略几百个图标名称

]

// ant-design-icon.json

// 最后生成的json文件

在项目中文件中

// iconifyIconOffline.ts
import { addCollection } from 'iconify-icon';
import antDesignIconJson from './ant-design-icon.json';

addCollection(antDesignIconJson);

然后在main.ts中引入iconifyIconOffline.ts文件就可以