如何用自定义图标替换现有SVG图标？

开发
1

所以我在一个关于将“点赞”图标更改为“竖起大拇指”图标的组件的帖子中提出了这个问题。很抱歉再次提起这个话题，但我完全困惑了。

我想做的是使用来自这里的自定义“点赞”图标 - Font Awesome，并将轮廓版本用作“未点赞”图标。这可行吗？由于这是一个专业版图标，我是否需要下载它，或者自己制作并作为自定义图标或表情符号添加，然后将其应用到“点赞”图标组件上？我也不确定该怎么做。

我已经安装并测试了“更改点赞图标”组件，在一个未使用的主题上测试过，它确实按预期工作。

我猜测，如果你想使用自定义图标，就不能同时使用该组件，因为“竖起大拇指”似乎会覆盖所有内容。所以我移除了它，并在该主题的自定义 HTML 的 Header 区域添加了以下代码：

      api.replaceIcon('d-liked', 'fa-pig');
      api.replaceIcon('d-unliked', 'fal-pig');
      api.replaceIcon('notification.liked', 'fa-pig');
      api.replaceIcon('notification.liked_2', 'fa-pig');
      api.replaceIcon('notification.liked_many', 'fa-pig');
      api.replaceIcon('notification.liked_consolidated', 'fa-pig');      
      api.replaceIcon('d-unliked', 'fal-pig');
      api.replaceIcon('notification.liked', 'fa-pig');
      api.replaceIcon('notification.liked_2', 'fa-pig');
      api.replaceIcon('notification.liked_many', 'fa-pig');
      api.replaceIcon('notification.liked_consolidated', 'fa-pig');      
      api.replaceIcon('heart', 'fa-pig');

在 SVG 图标子集中，我添加了 fa-pig 和 fal-pig，但预览时点赞图标是空白的。我猜这是因为我没有实际安装猪图标。所以我尝试了存钱罐图标，据说是免费的，并将其添加到图标子集中，但点赞图标仍然是空白的。

显然，我哪里做错了。我尝试上传一个名为 icons-sprite 的 SVG 资产到这个测试主题，它允许我上传一个，但我不能将两个不同的上传命名为相同的变量名 Icons-sprite。无论如何，即使只上传一个，图标仍然是空白的。

我在 IT 行业工作，但在编程这些高级的 Discourse 后端内容方面，我完全是个新手。

任何帮助都将不胜感激，谢谢。

2 个赞
2

我不是这方面的专家……

或许可以看看 Discourse FontAwesome Pro

4 个赞
3

piggy-bank 图标应该可以正常工作，但您需要在 SVG 图标子集站点设置以及 JS 覆盖函数中，以不带任何前缀的方式添加它。

Pro 图标未包含在核心中，因此对于仅限 Pro 的 pig 图标，您可以使用 Jay 上面建议的插件，或者自行创建精灵图。请务必查看 OP 中链接的示例 SVG 精灵图文件，该精灵图需要具有特定的结构，包含符号（symbols）和 ID（然后在 JS API 调用中使用该 ID）。

5 个赞
4

所以我再次尝试，将“存钱罐”图标添加到了 SVG 图标子集中。我再次在头部添加了 JS 代码，并引用了“存钱罐”，它终于正常工作了！谢谢！现在该图标的唯一问题是，已点赞和未点赞的帖子看起来完全一样，未点赞的帖子没有轮廓版本。再次访问 Font Awesome 网站时，我注意到该图标的轮廓版本是 PRO 版。因此这个想法行不通了。我不打算为了一个图标每年花费一百美元，我们是非营利组织，不收取会员费。

所以我想我还是得自己创建图标。我会再次查看那些说明。

3 个赞
5

你是否同时添加了这两个版本？（我尚未进行你所做的操作，因此这可能也无济于事）。有一个主题组件会生成类似“竖起大拇指”的图标，你可以检查该组件，确认是否添加了更改点赞状态所需的所有内容。（或者，也许该图标根本无法实现此效果）。

2 个赞
6

好的，我尝试了一些方法来创建自己的文件。不幸的是，OP 中查看 SVG 精灵文件格式示例的链接只是一个空白页面，无法加载。所以我只能凭感觉来做了。我在 Illustrator 中创建了两个 SVG 文件，导出后放入 Chrome 浏览器，通过“检查元素”获取路径文件信息。

我使用的是 Mac，所以用文本编辑（TextEdit）打开，将我认为应该包含在精灵文件中的信息复制进去，然后将文件扩展名改为 .svg。接着将其上传到主题中，并将 JS 代码添加到头部。

同样，我不确定这样做是否正确，而且我相当确定它不正确，因为当我预览网站主题时，它完全崩溃了。我收到了“哎呀”错误：“驱动此讨论论坛的软件遇到了意外问题。”在我删除上传的图标精灵 SVG 文件并等待一段时间后，网站又正常加载了。

以下是文件中的 SVG 信息和 JSON 代码。

谢谢！

如果有人愿意查看，这是 Google Drive 上的精灵文件链接：Drive

以及代码：

Screen Shot 2021-03-19 at 4.32.51 PM
Screen Shot 2021-03-19 at 4.32.51 PM499×408 30.8 KB

2 个赞
7

您不应重复添加 icons-sprite。

能否在代码块中贴出 SVG 路径？我认为您在将图标放入 sprite 时遇到了问题，我可以帮忙解决。

6 个赞
8

谢谢！这是您要找的吗？

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

  <!-- ViewBox 和 Polygon 取自 "SVGpig.svg" -->
  <symbol id="ids-SVGpig" width="616px" height="425px" viewBox="0 0 616 425">
    <path xmlns="http://www.w3.org/2000/svg" fill="#060709" d="M184.131,400.155c2.827,0.205,3.614-5.244,7.953-7.232c4.652-7.228,0,0,7.627-10.233    c-0.112,0.04,6.764-6.983,6.651-6.942c6.519-17.718,21.288-36.328,29.468-53.35c53.678,30.022,119.689,40.696,178.843,21.456    c2.529-0.931,3.49,2.748,4.203,4.525c3.127,12.466,2.592,25.449,2.285,38.221c1.147,7.776-6.405,14.642-5.161,22.4    c4.807-0.332,19.038,0.231,23.851,0.298c2.355-7.332,1.213-5.049,4.524-12.042c0.322-0.68,4.927-10.54,5.377-10.93    c4.667-11.476,9.501-22.896,14.743-34.119c5.729,11.479,7.265,24.374,9.339,36.882c-0.092,0.01-0.183,0.021-0.275,0.03    c3.219,10.044-1.754,20.419-0.559,30.879c8.474,0.214,23.744-0.615,32.184-1.483c0.118-3-0.39-5.761-0.319-8.759    c3.064-13.446,9.544-26.351,14.214-39.303c1.83-5.448,6.072-11.021,3.807-16.972c-2.982-9.171-2.917-18.918-2.855-28.449    c-0.184-7.692,6.717-12.547,10.316-18.613c30.147-44.639,37.913-101.296,30.606-153.864c13.341-4.319,29.918-11.775,31.892-27.499    c-0.446-9.285,19.679-20.46,17.656-29.556c-5.111,2.487-19.541,7.725-22.192,10.497c-3.552-1.966-7.667-5.363-11.912-3.354    c-4.239,2.356-7.504,7.027-7.651,11.936c0.809,4.973,6.115,7.092,9.712,9.815c-5.499,6.366-14.325,6.291-22.056,6.453    c-4.471-0.021-9.786,0.26-12.861-3.666c-20.989-23.668-46.85-43.261-76.024-55.694c-32.579-14.011-68.688-18.704-103.914-15.92    c-38.915,2.733-76.397,14.716-112.439,29.032c6.805-24.491,8.647-50.02,8.446-75.34c-27.898,5.61-56.151,13.44-79.849,29.784    c-2.461,1.879-5.58,3.147-8.558,1.596c-18.286-7.325-38.642-11.424-58.18-7.058c-16.763,3.533-31.39,14.275-41.46,27.907    C62.018,74.314,54.998,90.515,40,97.979c-6.076,0.593-9.563-6.335-13.738-9.771c-6.909,8.871-14.208,17.696-18.813,28.033    c-2.424,4.944,0.913,10.092,3.587,14.148c6.601,9.78,24.814,13.061,35.339,17.317c-5.382,0.674-17.733,2.564-23.123,3.159    c12.034,17.167,26.912,32.841,45.512,42.914c16.032,9.485,31.733,19.516,47.847,28.86c5.072,3,11.006,5.358,14.172,10.658    c7.56,12.251,13.543,25.426,21.329,37.545c2.928,4.184,2.657,9.459,2.343,14.312c-2.448,33.767-8.148,67.191-12.444,100.755    c5.083-0.22,6.743,3.232,11.097,0.655c2.072,2.461,3.037,1.204,7.392,2.496c2.018-6.083,18.703-53.914,20.5-60.062    c0.033,6.355-15.454,62.01-17,68 M77.21,126.644c-5.751-4.765-8.054-13.37-4.71-20.168c1.688-3.971,8.684-5.219,10.362-0.624    C86.532,113.189,82.366,121.266,77.21,126.644z"/>
  </symbol>

  <!-- ViewBox 和 Polygon 取自 "SVGpigout.svg" -->
  <symbol id="ids-SVGpigout" width="621px" height="430px" viewBox="0 0 621 430">
    <path xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#060709" stroke-width="8" stroke-miterlimit="10.43" d="M167.5,399.499L194,405    c2.827,0.205,1.084-10.077,1.084-10.077s0,0,7.627-10.233c-0.112,0.04,6.651-6.942,6.651-6.942    c8.885-18.201,21.288-36.328,29.468-53.35c53.678,30.022,119.689,40.696,178.843,21.456c2.529-0.931,3.49,2.748,4.203,4.525    c3.127,12.466,2.592,25.449,2.285,38.221c1.147,7.776-5.405,17.642-4.161,25.4c4.807-0.332,17.453-2.001,22.266-1.935    c2.355-7.332,1.798-5.816,5.109-12.81c0.322-0.68,4.927-10.54,5.377-10.93c4.667-11.476,14.743-34.119,14.743-34.119l9.339,36.882    l-0.275,0.03c0,0,0.246,20.419,1.441,30.879c8.474,0.214,21.744-0.615,30.184-1.483c0.118-3-0.39-5.761-0.319-8.759    c3.064-13.446,9.544-26.351,14.214-39.303c1.83-5.448,6.072-11.021,3.807-16.972c-2.982-9.171-2.917-18.918-2.855-28.449    c-0.184-7.692,6.717-12.547,10.316-18.613c30.147-44.639,37.913-101.296,30.606-153.864c13.341-4.319,29.918-11.775,31.892-27.499    c-0.446-9.285,19.679-20.46,17.656-29.556c-5.111,2.487-19.541,7.725-22.192,10.497c-3.552-1.966-7.667-5.363-11.912-3.354    c-4.239,2.356-7.504,7.027-7.651,11.936c0.809,4.973,6.115,7.092,9.712,9.815c-5.499,6.366-14.325,6.291-22.056,6.453    c-4.471-0.021-9.786,0.26-12.861-3.666c-20.989-23.668-46.85-43.261-76.024-55.694c-32.579-14.011-68.688-18.704-103.914-15.92    c-38.915,2.733-76.397,14.716-112.439,29.032c6.805-24.491,8.647-50.02,8.446-75.34c-27.898,5.61-56.151,13.44-79.849,29.784    c-2.461,1.879-5.58,3.147-8.558,1.596c-18.286-7.325-38.642-11.424-58.18-7.058c-16.763,3.533-31.39,14.275-41.46,27.907    C65.018,76.314,57.998,92.515,43,99.979c-6.076,0.593-9.563-6.335-13.738-9.771c-6.909,8.871-14.208,17.696-18.813,28.033    c-2.424,4.944,0.913,10.092,3.587,14.148c6.601,9.78,24.814,13.061,35.339,17.317c-5.382,0.674-17.733,2.564-23.123,3.159    c12.034,17.167,26.912,32.841,45.512,42.914c16.032,9.485,31.733,19.516,47.847,28.86c5.072,3,11.006,5.358,14.172,10.658    c7.56,12.251,13.543,25.426,21.329,37.545c2.928,4.184,2.657,9.459,2.343,14.312c-2.448,33.767-8.148,67.191-12.444,100.755    c5.083-0.22,6.743,3.232,11.097,0.655c2.072,2.461,3.037,1.204,7.392,2.496c2.018-6.083,12.203-34.414,14-40.562    c0.033,6.355-14,46.666-7,49.999 M80.21,128.644c-5.751-4.765-8.054-13.37-4.71-20.168c1.688-3.971,8.684-5.219,10.362-0.624    C89.532,115.189,85.366,123.266,80.21,128.644z"/>
  </symbol>


</svg>
2 个赞
9

Discourse Gifs 提供了一个自定义的 GIF 图标，您可以将其作为示例使用：

8 个赞
10

好的，试试使用这个：Dropbox

我只为 d-liked 添加了 replaceIcon 调用，你需要在实例中编辑组件并添加其他行。请确保使用 SVG 文件中的 ID，现在它们只是 SVGpig 和 SVGpigout。

10 个赞
11

太棒了！谢谢，成功了，我已经把它运行起来了。我的社区对此表示感谢。非常感谢！！

Screen Shot 2021-03-25 at 12.29.27 PM
Screen Shot 2021-03-25 at 12.29.27 PM304×121 5.13 KB

8 个赞
12

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.