前面讲解了放开双手使用svg小图标(vue3)
但是还有个问题是每次找图标还是有点费劲
那么这里就写一个脚本，根据自己项目的图标目录以及svg名称生成一个参照表
dect中是 目录名称:菜单名称我这里的项目是根据菜单进行icon管理的，放在一个文件夹也可以
可以根据自己的情况修改代码

这里我的icon资源存放路径是当前目录下static/icons
自行更改最终生成的html文件名是icons.html



import os
from pathlib import Path

dect = {
  'homekanban': '数字看板',
  'passageway': '数字台账',
  ...
  
}

current_dir = Path.cwd()
html_file_path = current_dir / "icons.html"
PATH = current_dir / 'src/assets/icons'
dirName = ''


def createRes(svgName: str, iconName: str, d_name):
  if d_name == '':
    url = f'{PATH}/{svgName}'
  else:
    url = f'{PATH}/{d_name}/{svgName}'
  return f'''
        <div style='display:flex;'> <div style="background-color: #aaa;width:40px;height:40px;display: 
        flex;align-items: center; justify-content: center;"> <img style='width:100%' 
        src='{url}'/>
            </div>
            <div style="margin-left:20px">{iconName}</div>
        </div>
        '''


def appendGroup(d_name: str, tag: str):
  return f'''
    <div style = "display:flex;flex-direction: column;row-gap: 20px;" >
  <h2> {dect.get(d_name.lower(), '其他')} </h2>
    {tag}
  </div>
    '''


def appendDiv(tag: str):
  return f'''<div style='display: grid; grid-template-columns: 1fr 1fr 1fr 1fr;gap: 20px;padding: 20px;'>{tag}</div>'''


def appendBody(tag: str):
  return f'''
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>{tag}</body>
</html>


'''


def index():
  arr = os.listdir(PATH)
  res = ''
  global dirName
  for item in arr:
    temp = ''
    if os.path.isdir(os.path.join(PATH, item)):
      dirName = item
      svgArr = os.listdir(os.path.join(PATH, item))
    else:
      dirName = ''
      svgArr = [item]
    for child in svgArr:
      svgName = child.split('.')[0]
      tempName = f'Ju-{item}-{svgName}'
      if child.split('.')[1] != 'png':
        temp += createRes(child, tempName, dirName)
    res += appendGroup(item, temp)
  with open(html_file_path, 'w', encoding='utf-8') as f:
    # 写入初始内容
    f.write(appendBody(appendDiv(res)))

  return appendDiv(res)


index()
input('图标文件创建完成，按任意键退出...')

效果图

根据前面封装的插件，这里就可以直接复制使用了

根据目录生成svg图标对照表

效果图