I'm trying to create my custom icon for FontAwesome using this tool: https://editor.method.ac/
It came with code:
<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>
It looks good in browser.
So I prepared code for FontAwesome using this guide: 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']
};
Problem is that result is this:
And should be this: (or near)
What I'm doing wrong?
This is not the answer you are expecting. I would have putted it as a comment but I need to add some code.
This is how a FontAwesome icon is looking like in SVG:
no width attribute,
no height attribute,
a viewBox attribute
inside nothing else but one path with a fill="currentColor" attribute
<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>
Your SVG has:
a width attribute,
a height attribute,
NO viewBox attribute
inside 2 groups the second one with 2 paths.
I think you should try using only one path. In order to join the 2 paths in one path ypu can do something like this:
<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>
I hope it helps.
I have this dummy svg showing a cirle with some grey figure inside
<svg viewBox="0 0 86 86" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<circle id="path-1" cx="43" cy="43" r="43"></circle>
</defs>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-585.000000, -391.000000)">
<g transform="translate(585.000000, 391.000000)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<use id="Oval" fill="currentcolor" xlink:href="#path-1"></use>
<g id="Group" mask="url(#mask-2)" fill="#b8b8b8">
<g transform="translate(21.500000, 27.823529)" id="Page-1">
<path d="M0.5,0.176470588 L0.5,58.1764706 L15.5,58.1764706 L15.5,49.1764706 L29.5,49.1764706 L29.5,31.1764706 L7.5,31.1764706 L7.5,37.1764706 Z"></path>
</g>
</g>
</g>
</g>
</g>
when I convert it to a sprite using gulp-svg-sprite with mode symbol I get this result
<?xml version="1.0" encoding="UTF-8" ?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><symbol viewBox="0 0 86 86" id="company"><defs><circle id="aa" cx="43" cy="43" r="43"/></defs><g fill="none" fill-rule="evenodd"><mask id="ab" fill="#fff"><use xlink:href="#aa"/></mask><use fill="currentcolor" xlink:href="#aa"/><g mask="url(#ab)" fill="#b8b8b8"><path d="M22 28v58h15v-9h14V59H29v6z"/></g></g></symbol></svg>
Now the grey figure breaks out of the circle and this even happens if I copy root defs- and g-tags from my original svg directly into the symbol-tag. I have also tried inserting a clipPath in the symbol version but with no luck.
What am I missing here?
UPDATED: Simplifying your svg may work ... try with the examples below, one using symbols, one without (in case the gulp sprite code cannot have nested symbols) ... it may be an issue with the defs area.
svg {
width: 100px;
}
<svg viewBox="0 0 86 86" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="c">
<circle cx="43" cy="43" r="43" fill="currentColor" />
</symbol>
<mask id="mask" color="#fff">
<use xlink:href="#c" />
</mask>
</defs>
<use xlink:href="#c" color="#666" />
<path fill="#999" mask="url(#mask)" d="M10 0v60h30v-10h20v-20h-30v9z" />
</svg>
<svg viewBox="0 0 86 86" xmlns="http://www.w3.org/2000/svg">
<defs>
<mask id="mask2" color="#fff">
<circle cx="43" cy="43" r="43" fill="#FFF" />
</mask>
</defs>
<circle cx="43" cy="43" r="43" fill="currentColor" />
<path fill="#999" mask="url(#mask2)" d="M10 0v60h30v-10h20v-20h-30v9z" />
</svg>
It is probably not a complete answer but I managed to get it work;
First I extended my defs with a clipPath using my circle
<defs>
<circle id="circle" cx="43" cy="43" r="43"></circle>
<clipPath id="clippath"><use overflow="visible" xlink:href="#circle" /></clipPath>
</defs>
Then, using the clipPath on my first group and switching from gulp-svg-sprite to gulp-svgstore (which moves the defs to the top, above the symbols) gives me what I expect both as single svg and as an svg symbol sprite.