svg - 为 FontAwesome 5 创建自定义图标

Question

我正在尝试使用此工具为 FontAwesome 创建自定义图标：https ://editor.method.ac/

它附带代码：

<svg width="512" height="512" xmlns="http://www.w3.org/2000/svg">
 <!-- Created with Method Draw - http://github.com/duopixel/Method-Draw/ -->
 <g>
  <title>background</title>
  <rect fill="#fff" id="canvas_background" height="514" width="514" y="-1" x="-1"/>
  <g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">
   <rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"/>
  </g>
 </g>
 <g>
  <title>Layer 1</title>
  <path id="svg_3" d="m367.967458,193.5l-23.50001,13.50001c0.00001,0.49999 -65.99999,-58.00001 -118,-53.00001c-52,5 -55.5,39.500009 -49,71.00001c6.5,31.5 14,63 64,111.5c50.00001,48.50001 97.50001,63.00001 119.50001,62.50001c22,-0.5 22.5,-1.5 29,-4c6.5,-2.5 8,-4.5 8,-4.5c0,0 59.49997,60.49998 61.99999,63.49999c2.50002,3.00001 -14.99998,42.50001 -80.49999,44.50001c-65.5,2 -162.50001,-44 -231.50001,-113c-69.00001,-69.00001 -100.50001,-130.00001 -103.50001,-213.00002c-3,-83.000009 62.500008,-97 90.500009,-100c28.000001,-3 85.000011,8.5 132.500011,39c47.5,30.5 68.99999,43.00001 100.5,82z" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" stroke="#000" fill="#fff"/>
  <path id="svg_5" d="m258.451949,258.000015l47.75001,-31.000008c0.249993,0.000007 81.249998,71.000011 105.75,36.500009c24.500001,-34.500002 -27.000002,-96.000006 -55.000004,-127.500008c-28.000001,-31.500002 -90.000005,-55.500003 -90.249997,-55.500005c0.249992,0.000002 -57.750012,-66.500002 -58.500002,-68.000003c0.000006,0.499993 46.500009,12.499994 106.500012,54.999997c60.000004,42.500002 129.000008,139.500008 141.000009,170.00001c12,30.500002 19.000001,75.500004 -3.5,94.000005c-22.500002,18.500001 -64.000004,8.000001 -90.500006,-2.5c-26.500001,-10.5 -64.500004,-41.000002 -71.500004,-45.000002c-7.000001,-4.000001 -31.500002,-25.500002 -31.750018,-25.999995z" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" stroke="#000" fill="#fff"/>
 </g>
</svg>

它在浏览器中看起来不错。

所以我使用本指南为 FontAwesome 准备了代码：https ://github.com/FortAwesome/Font-Awesome/wiki/Customize-Font-Awesome

const faMyCustomIcon = {
  prefix: 'fac',
  iconName: 'my-custom-icon',
  icon: [512, 512, [], 'e001', 'm367.967458,193.5l-23.50001,13.50001c0.00001,0.49999 -65.99999,-58.00001 -118,-53.00001c-52,5 -55.5,39.500009 -49,71.00001c6.5,31.5 14,63 64,111.5c50.00001,48.50001 97.50001,63.00001 119.50001,62.50001c22,-0.5 22.5,-1.5 29,-4c6.5,-2.5 8,-4.5 8,-4.5c0,0 59.49997,60.49998 61.99999,63.49999c2.50002,3.00001 -14.99998,42.50001 -80.49999,44.50001c-65.5,2 -162.50001,-44 -231.50001,-113c-69.00001,-69.00001 -100.50001,-130.00001 -103.50001,-213.00002c-3,-83.000009 62.500008,-97 90.500009,-100c28.000001,-3 85.000011,8.5 132.500011,39c47.5,30.5 68.99999,43.00001 100.5,82zm258.451949,258.000015l47.75001,-31.000008c0.249993,0.000007 81.249998,71.000011 105.75,36.500009c24.500001,-34.500002 -27.000002,-96.000006 -55.000004,-127.500008c-28.000001,-31.500002 -90.000005,-55.500003 -90.249997,-55.500005c0.249992,0.000002 -57.750012,-66.500002 -58.500002,-68.000003c0.000006,0.499993 46.500009,12.499994 106.500012,54.999997c60.000004,42.500002 129.000008,139.500008 141.000009,170.00001c12,30.500002 19.000001,75.500004 -3.5,94.000005c-22.500002,18.500001 -64.000004,8.000001 -90.500006,-2.5c-26.500001,-10.5 -64.500004,-41.000002 -71.500004,-45.000002c-7.000001,-4.000001 -31.500002,-25.500002 -31.750018,-25.999995z']
};

问题是结果是这样的：

应该是这样的：（或接近）

我做错了什么？

标签： svgfont-awesome-5

Answer 1

这不是您期望的答案。我会把它作为评论，但我需要添加一些代码。

这是 SVG 中 FontAwesome 图标的样子：

• 没有宽度属性，
• 没有高度属性，
• 一个viewBox属性
• fill="currentColor"除了具有属性的一条路径之外，别无其他

<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="address-book" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="svg-inline--fa fa-address-book fa-w-14 fa-7x"><path fill="currentColor" d="M436 160c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-20V48c0-26.5-21.5-48-48-48H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h320c26.5 0 48-21.5 48-48v-48h20c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-20v-64h20c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-20v-64h20zm-228-32c35.3 0 64 28.7 64 64s-28.7 64-64 64-64-28.7-64-64 28.7-64 64-64zm112 236.8c0 10.6-10 19.2-22.4 19.2H118.4C106 384 96 375.4 96 364.8v-19.2c0-31.8 30.1-57.6 67.2-57.6h5c12.3 5.1 25.7 8 39.8 8s27.6-2.9 39.8-8h5c37.1 0 67.2 25.8 67.2 57.6v19.2z" class=""></path></svg>

您的 SVG 具有：

• 宽度属性，
• 一个高度属性，
• 没有viewBox属性
• 在 2 组内，第二组有 2 条路径。

我认为您应该尝试仅使用一条路径。为了在一条路径中加入 2 条路径，ypu 可以执行以下操作：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path id="svg_3" d="m367.967458,193.5l-23.50001,13.50001c0.00001,0.49999 -65.99999,-58.00001 -118,-53.00001c-52,5 -55.5,39.500009 -49,71.00001c6.5,31.5 14,63 64,111.5c50.00001,48.50001 97.50001,63.00001 119.50001,62.50001c22,-0.5 22.5,-1.5 29,-4c6.5,-2.5 8,-4.5 8,-4.5c0,0 59.49997,60.49998 61.99999,63.49999c2.50002,3.00001 -14.99998,42.50001 -80.49999,44.50001c-65.5,2 -162.50001,-44 -231.50001,-113c-69.00001,-69.00001 -100.50001,-130.00001 -103.50001,-213.00002c-3,-83.000009 62.500008,-97 90.500009,-100c28.000001,-3 85.000011,8.5 132.500011,39c47.5,30.5 68.99999,43.00001 100.5,82z 
                    
                    M258.451949,258.000015l47.75001,-31.000008c0.249993,0.000007 81.249998,71.000011 105.75,36.500009c24.500001,-34.500002 -27.000002,-96.000006 -55.000004,-127.500008c-28.000001,-31.500002 -90.000005,-55.500003 -90.249997,-55.500005c0.249992,0.000002 -57.750012,-66.500002 -58.500002,-68.000003c0.000006,0.499993 46.500009,12.499994 106.500012,54.999997c60.000004,42.500002 129.000008,139.500008 141.000009,170.00001c12,30.500002 19.000001,75.500004 -3.5,94.000005c-22.500002,18.500001 -64.000004,8.000001 -90.500006,-2.5c-26.500001,-10.5 -64.500004,-41.000002 -71.500004,-45.000002c-7.000001,-4.000001 -31.500002,-25.500002 -31.750018,-25.999995z" fill="currentColor" />

</svg>

我希望它有所帮助。