# LDP前端框架功能菜单图标扩展配置

当前前端框架功能菜单图标使用`svg`格式, 默认图标都是使用项目文件夹`src\icons\svg`中的`svg`图标文件。如需要配置其他图标显示，则需要采用外部扩展方式来动态添加图标。

扩展图标操作说明：
> 推荐使用[iconfont字体图标库](https://www.iconfont.cn/), 字体图标大小`128*128`, 纯色字体。

- 进入字体图标库

![1608112180075](..\imgs\icon\iconfont.png)

- 登录账号（可以使用`github` 账号登录）
- 搜索需要的图标![1608114092658](..\imgs\icon\search-result.png)

- 添加图标入库

![1608114350342](..\imgs\icon\search-add.png)

- 保存图标到项目中

![1608169908950](..\imgs\icon\1608169908950.png)

![1608170283435](..\imgs\icon\1608170283435.png)

![1608170373278](..\imgs\icon\1608170373278.png)

![1608170419215](..\imgs\icon\1608170419215.png)

- 下载图标文件集成到系统中

  ![1608170483164](..\imgs\icon\1608170483164.png)

- 将图标文件`iconfont.js`解压到框架项目中的`public\icon`目录下，如果不存在`icon`目录请手动新建。

![1608170757363](..\imgs\icon\1608170757363.png)

- 在`icon`目录下新建`config.json` 配置文件

  ```javascript
  ...file in  icon/config.json
  {
    "files": "iconfont.js" // 定义加载的字体图标文件名， 默认是当前路径下。
    // 可以为数组形式加载多个图标文件, 如下 
     // "files": ["iconfont.js", "iconfont-plus.js"]
  }
  ```

  ![1608190281495](..\imgs\icon\1608190281495.png)

- 在系统中菜单维护中配置菜单图标

![1608190499947](..\imgs\icon\1608190499947.png)

- 把下载的图标文件按照上面文件同样配置到`example`应用脚手架中

![1608190613099](..\imgs\icon\1608190613099.png)

![1608190704882](..\imgs\icon\1608190704882.png)





## PS: 自定义图标请先上传到`iconfont`平台然后在添加项目中一起下载出来解压到`icon` 文件夹中。