Jeecgboot 自定义图标(彩色)

先上效果图:这是做完的效果
我这边用的版本是比较新的大家可以根据博客日期去看。
1.首先图标准备方面都是照着官网的开发文档去做的。
jeecgboot入口
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
个人比较懒,就都截图放这里吧。需要代码的可以通上面链接去复制。
我这边一共需要改的地方有三个文件:

App.vue:

加引入:
在这里插入图片描述
加样式:
在这里插入图片描述

代码:

//引入部分
  // Fontclass模式
  import '@/components/iconfont/common.less'
  // 使用 symbol模式 支持多色
  import '@/components/iconfont/iconfont.js'
//样式部分
  .icon {
    width: 2.5em;
    height: 2.5em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
  }

src\components\menu\index.js、

位置图片:
在这里插入图片描述
代码:

      //添加自定义图标
      if (icon !== 'none' && icon !== undefined && icon.indexOf('action') != -1) {
        let className = '#' + icon
        // return <i class={className} style="margin-right:8px;"></i>
        return (
          <svg class="icon" aria-hidden="true">
            <use href={className}></use>
          </svg>
        )
      }

src\views\system\modules\icon\Icons.vue
图片:在这里插入图片描述

在这里插入图片描述
代码:

      <a-tab-pane tab="自定义图标" key="7">
        <ul>
          <li v-for="icon in icons.selfIcons" :key="icon">
            <svg class="icon" aria-hidden="true" :title="icon" @click="chooseIcon(icon)">
              <use :xlink:href="'#' + icon"></use>
            </svg>
          </li>
        </ul>
      </a-tab-pane>
  const selfIcons = ['actiondudaoxiafa','actionshangbaobaobiao','actionxinlipingce','actionsuowaijiuyi','actionxunzhenpeiyao','actionyuanchengzhibo','actionyizhufayao','actionjiashuyuyue','actionzaitaorenyuanduibi','actiondaishouyarenyuan','actiondaichusuorenyuan','actiondingdanguanli','actionfalvwenshujieshou','actionfangwushou','actionrenyuanguanlianshenhe','actionjiashuchongzhi','actiontonganrenyuanxinxi','actionxiansuoliuzhuan','actionzhanghuguanli','actionlvshiyuyue','actionfangwufang','actionjingqingchuzhi','actionrenyuanguanlianshenhe1','actiontixunxinxishenhe','actionyuyuesuochang','actionxunshijilu','actionyuyuejianchaguan','actionlvshihuijianshenhe','actionjiashuhuijianshenhe','actionyuyuejiuyi','actiontiyadaihui','actionchaoqicuiban','actionanquanjiancha','actionermukaohe','actionhuanjieyanqi','actionhuanjiebiandong','actionermuwujian','actionjiashuhuijianshibanli','actionjianshitiaozheng','actionlvshihuijian','actionliusuorenyuandengji','actionliusurenyuankaohe','actionliangxiajianshi','actionlvshihuijianshibanli','actionsanguding','actiontanhuajiaoyu','actionpanjuedengji','actiontixunhuijian','actiontiyadaichu','actionxinxijiucuo','actiontiyadaihui1','actionyaopincaigouruku','actionjiankongweiguidengji','actiondanduguanyakaohe','actionyaopinpandiandan','actionxiejushiyongkaohe','actionxunkongjiaojieban','actionxunshiweiguidengji','actionyanguanrenshenqing','actionlvshiguanli','actiondanduguanyashenqing','actionyanguankaohe','actionxiejushiyongshenqing','actionrenyuankaohe','actionbanzujiaojieban','actionanquandajiancha','actionkaohepingguguanli','actionrichangtijian','actioncaiwuguanli','actionteshuyinshi','actiondudaofankui','actionxunzhendengji','actionriqingyuejie','actiontongzhiguanli','actiontongzhizhongxin','actiondudaoxinxi']

图和代码对照着找,完成以上修改就可以看到彩色的自定义图标了,同时附上图标压缩包
仅作为个人记录,因为第二次弄这个,突然给忘了好多地方的修改所以记录一下。

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值