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

当前前端框架功能菜单图标使用`svg`格式, 默认图标都是使用项目文件夹`src/icons/svg`中的`svg`图标文件。如需要配置其他图标显示，则需要采用外部扩展方式来动态添加图标。默认会加载文件所以如果不存在文件的情况下会报错`404`, 如果想要关闭则自行修改代码`src/layout/index.vue` 中`loadIcons`。



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

- 进入字体图标库

![1608112180075](../imgs/icon/01访问Iconfont.png)

- 登录账号（可以使用`github` 账号登录）

![1608285433134](../imgs/icon/02登录.png)

- 搜索需要的图标

![1608285547839](../imgs/icon/03搜索图标.png)



- 添加图标入库

![1608114350342](../imgs/icon/04添加图标入库.png)

- 保存图标到项目中

![1608169908950](../imgs/icon/05查看入库图标.png)

![1608170283435](../imgs/icon/06添加项目.png)

![1608170373278](../imgs/icon/07加入到项目.png)

![1608170419215](../imgs/icon/08查看项目图标.png)

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

![1608170483164](../imgs/icon/09下载图标.png)

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

![1608170757363](../imgs/icon/10解压图片文件.png)

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

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

![1608190281495](../imgs/icon/11图标文件.png)

  

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

![1608190499947](../imgs/icon/12配置菜单图标.png)

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

![1608190613099](../imgs/icon/13配置文件到项目中.png)

![1608190704882](../imgs/icon/14系统中查看图标.png)





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