阿里字体图标颜色丢失的问题?

发布于 2022-09-11 20:02:47 字数 3259 浏览 21 评论 0

业务背景

  • 从蓝湖上下载svg图标
  • 上传到阿里图标库
  • 导出字体图标
  • 在项目中使用

遇到的问题

  • 少数图标会丢失颜色
  • 或者说丢失内容.......

设计图效果

clipboard.png

从蓝湖下载的svg文件

<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50">
  <defs>
    <style>
      .cls-1 {
        fill: #f6c659;
      }

      .cls-2 {
        fill: #fff;
      }
    </style>
  </defs>
  <g id="组_581" data-name="组 581" transform="translate(-115 -260)">
    <path id="交叉_5" data-name="交叉 5" class="cls-1" d="M14.645,50,0,35.355V14.933L14.933,0H35.355L50,14.645v21L35.643,50Z" transform="translate(115 260)"/>
    <g id="组_40" data-name="组 40" transform="translate(128 272)">
      <path id="路径_48" data-name="路径 48" class="cls-2" d="M1047.779,137.832h-6.151a2.755,2.755,0,0,1-2.691-2.7V115.464a2.755,2.755,0,0,1,2.691-2.7h17.589a2.775,2.775,0,0,1,2.787,2.7v8a.961.961,0,1,1-1.922,0v-8a.828.828,0,0,0-.769-.771h-17.686a.828.828,0,0,0-.769.771v19.572a.849.849,0,0,0,.769.868h6.151a.964.964,0,0,1,0,1.928Zm0,0" transform="translate(-1038.936 -112.764)"/>
      <path id="路径_49" data-name="路径 49" class="cls-2" d="M1068.961,139.153h-11.59a.966.966,0,1,1,0-1.932h11.59a.966.966,0,1,1,0,1.932Zm-11.59-1.449v0Zm4.829,8.21h-4.829a.966.966,0,1,1,0-1.932h4.829a.966.966,0,0,1,0,1.932Zm-4.829-1.449v0Zm12.556,13.04a6.761,6.761,0,1,1,6.761-6.761,6.72,6.72,0,0,1-6.761,6.761Zm0-11.591a4.829,4.829,0,1,0,4.829,4.829,4.782,4.782,0,0,0-4.829-4.829Zm0,0" transform="translate(-1051.688 -130.505)"/>
      <path id="路径_50" data-name="路径 50" class="cls-2" d="M1098.515,179.545v-.966h-1.449a.483.483,0,1,1,0-.966h.966l-.869-.966a.478.478,0,0,1,.676-.676L1099,177.13l1.159-1.159a.478.478,0,0,1,.676.676l-.869.966h.966a.483.483,0,1,1,0,.966h-1.449v.966h1.449a.483.483,0,1,1,0,.966h-1.449v.966a.483.483,0,1,1-.966,0v-.966h-1.449a.483.483,0,1,1,0-.966Zm0,0" transform="translate(-1080.735 -158.437)"/>
      <path id="路径_51" data-name="路径 51" class="cls-2" d="M1098.24,181.4a.762.762,0,0,1-.773-.773v-.772h-1.159a.762.762,0,0,1-.773-.773.711.711,0,0,1,.773-.772h1.159v-.483h-1.159a.773.773,0,0,1,0-1.545h.483l-.483-.483a.751.751,0,1,1,1.063-1.062l.966.966.966-.966a.751.751,0,0,1,1.063,1.062l-.483.483h.29a.773.773,0,0,1,0,1.545h-1.159v.483h1.159a.762.762,0,0,1,.773.772.711.711,0,0,1-.773.773h-1.159v.772a.831.831,0,0,1-.773.773Zm-1.932-2.511c-.1,0-.193.1-.193.29,0,.1.1.29.193.29h1.739v1.159c0,.1.1.29.193.29s.193-.1.193-.29V179.37h1.739c.1,0,.193-.1.193-.29,0-.1-.1-.29-.193-.29h-1.739v-1.449h1.739c.1,0,.193-.1.193-.29s-.1-.29-.193-.29h-1.546l1.256-1.352a.294.294,0,0,0,0-.387c-.1-.1-.29-.1-.29,0l-1.159,1.159-.193.29-.193-.193-1.159-1.159c-.1-.1-.29-.1-.29,0a.293.293,0,0,0,0,.386l1.256,1.352h-1.545c-.1,0-.193.1-.193.29s.1.29.193.29h1.739v1.449Zm0,0" transform="translate(-1079.978 -157.489)"/>
    </g>
  </g>
</svg>

上传到阿里图标库的效果

clipboard.png

引用到项目使用的效果

clipboard.png

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文