Creating custom icon for FontAwesome 5 - svg
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.
Related
How to draw letter R with SVG
I have a svg of letter B here is the code: <svg id="logo" xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 84 96"> <title>Logo</title> <g transform="translate(-8.000000, -2.000000)"> <g transform="translate(11.000000, 5.000000)"> <path d="M45.691667,45.15 C48.591667,46.1 50.691667,48.95 50.691667,52.2 C50.691667,57.95 46.691667,61 40.291667,61 L28.541667,61 L28.541667,30.3 L39.291667,30.3 C45.691667,30.3 49.691667,33.15 49.691667,38.65 C49.691667,41.95 47.941667,44.35 45.691667,45.15 Z M33.591667,43.2 L39.241667,43.2 C42.791667,43.2 44.691667,41.85 44.691667,38.95 C44.691667,36.05 42.791667,34.8 39.241667,34.8 L33.591667,34.8 L33.591667,43.2 Z M33.591667,47.5 L33.591667,56.5 L40.191667,56.5 C43.691667,56.5 45.591667,54.75 45.591667,52 C45.591667,49.2 43.691667,47.5 40.191667,47.5 L33.591667,47.5 Z" fill="currentColor" /> <polygon id="Shape" stroke="currentColor" strokeWidth="5" strokeLinecap="round" strokeLinejoin="round" points="39 0 0 22 0 67 39 90 78 68 78 23" /> </g> </g> </svg> And here is how it looks I just need to change letter B to letter R but i don't know the path and it should be centered in polygon
As I've commented: delete the path and add:
<text x="39" y="45" dominant-baseline="middle" text-anchor="middle" font-size="30">R</text>
where x="39" y="45" are the coords of the center of the hexagon. Please observe that the text is centered around this point (<text x="39" y="45" dominant-baseline="middle" text-anchor="middle")
svg{width:90vh}
<svg id="logo" xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 84 96">
<title>Logo</title>
<g transform="translate(-8.000000, -2.000000)">
<g transform="translate(11.000000, 5.000000)">
<polygon
id="Shape"
stroke="currentColor"
strokeWidth="5"
strokeLinecap="round"
strokeLinejoin="round"
points="39 0 0 22 0 67 39 90 78 68 78 23"
fill="none"
/>
<text x="39" y="45" dominant-baseline="middle" text-anchor="middle" font-size="30">R</text>
</g>
</g>
</svg>
If you don't plan going down the rabit hole of SVG's, try to use a SVG builder, should be faster as easier to visualise. Examples: https://vectorpaint.yaks.co.nz/ https://editor.method.ac/ After you finish you can download and use the svg file or open the file in your editor to see the code
How inherit stroke color in SVG? (Not fill, but stroke color)
I have an .SVG where I call with <img src="/image/arrow.svg" alt="Arrow">. Everything is good, but I would like to dynamically set a different stroke color (Not fill color...) for my SVG like <img ... style="color:red">. I read that I could use fill="currentColor" on my path,but how could I do for my stroke color? My SVG file: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" height="100" width="100"> <path d="M20 10 H90 V80" fill="transparent" stroke="currentColor" stroke-width="20" stroke-linecap="round"></path> <path d="M10 90 L100 0" fill="transparent" stroke="currentColor" stroke-width="20" stroke-linecap="round"></path> </svg> My html: <img src="/image/arrow.svg" alt="Arrow" style="color:red">
As Robert Lognson correctly stated, and previously discussed on StackOverflow, svg used as an image element has a new image context, thus it does not use the document's styles, whereas an inline svg element does use them.
So the following example works:
svg.red {
color: red;
}
<svg class="red" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" height="100" width="100">
<path d="M20 10 H90 V80" fill="transparent" stroke="currentColor" stroke-width="20" stroke-linecap="round"></path>
<path d="M10 90 L100 0" fill="transparent" stroke="currentColor" stroke-width="20" stroke-linecap="round"></path>
</svg>
How do I 'cover fit' this image to my Path?
How do I properly display the profile picture inside this shape instead of making a cut of the image?
<Svg
height="300"
width="300"
>
<Defs>
<ClipPath id="clip">
<Path d="M136.5 85 189 136 136.5 187 84 136z" />
</ClipPath>
</Defs>
<Image
x="0"
y="0"
width="100%"
height="100%"
href={{ uri: "https://cdn.business2community.com/wp-content/uploads/2017/08/blank-profile-picture-973460_640.png" }}
clipPath="url(#clip)"
preserveAspectRatio="xMinYMid meet"
/>
</Svg>
Currently it looks like:
But this is a cut of the image instead of 'fitting' it to the shape - I'm trying to achieve a 'cover fit'.
Clip-paths are applied after the image is sized, so you have to position & size the image appropriately. Here is a pure SVG version that works the way I think you want it to: <svg height="300px" width="300px"> <defs> <clipPath id="clip"> <path d="M136.5 85 189 136 136.5 187 84 136z" /> </clipPath> </defs> <image x="28%" y="27%" width="35%" height="35%" xlink:href="https://cdn.business2community.com/wp-content/uploads/2017/08/blank-profile-picture-973460_640.png" clip-path="url(#clip)"/> </svg>
Rotate circle and position arc over it with start and end angle
Hi is there any way to design the below picture with SVG or any other way? Please find the SVG Code for the circle with head <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="110px" height="110px" viewBox="0 0 110 110" enable-background="new 0 0 110 110" xml:space="preserve"> <g> <title>Sample</title> <g> <path d="M60.391,23.712V0H48.975v23.571c-21.802,2.619-37.87,20.953-37.87,43.041c0,23.995,19.536,43.391,43.411,43.391 c23.855,0,43.392-19.396,43.392-43.391C97.907,44.736,81.202,26.543,60.391,23.712z M22.501,66.682 c0-17.628,14.369-31.998,32.015-31.998c17.626,0,31.995,14.37,31.995,31.998c0,17.625-14.299,32.065-31.995,32.065 C36.8,98.747,22.501,84.307,22.501,66.682z"/> </g> Head Based on the head angle in the example 332° the circle should rotate Red Arc Based on the start and end position of the arc it should start from there with displaying the start and end position as in the picture 50 and 180. Please help me to design :-)
Try this i used rect and circle instead of path
svg{
background:#223D50;
}
<svg width="100%" height="100%" viewbox="0 0 100 100">
<rect x="40" y="30" width="3" height="12" fill="grey" transform="rotate(-28 42 50)"/>
<circle cx="42" cy="53" r="10" stroke-width="3" stroke="grey" fill="none"/>
<circle cx="42" cy="53" r="18" fill="transparent" stroke-width="5" stroke="red" stroke-dasharray="36.11111% 100%" stroke-dashoffset="0" transform="rotate(-30 42, 53)"/>
<text x="36" y="55" fill="white" font-size="5">Check</text>
</svg>
Adding new nodes to an SVG <use> tag
Just playing the defs and use for the first time. What I would like to do is use defs to build a base template and then when I use it customise it by adding some more inner tags. Is this possible, as when I try to do it in Firefox it doesn't render any tags which I place as children to the use tag. e.g: <?xml version="1.0" standalone="no"?> <svg width="10000px" height="5500px" version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <g id="storyCard"> <rect width="800px" height="500px" fill="#ffff00" /> <path d="M 20 120 L 780 120 M 640 20 L 640 120" stroke-width="6px" stroke="black" fill="none" /> </g> </defs> <!-- White Board --> <path d="M 0 0 L 10000 0 L 10000 550 L 0 5500 z M 2000 0 L 2000 5500" stroke-width="20px" stroke="black" fill="none" /> <use xlink:href="#storyCard" transform="translate(100,100)" /> <use xlink:href="#storyCard" transform="translate(1000,200)" > <text x="20" y="80" font-size="45" font-weight="bold" font-family="Comic Sans MS, cursive"> My Dummy Story </text> </use> </svg>
It isn't directly possible with use. The use element can contain description and animation elements, but it doesn't behave like an XBL container. You could use XBL, if you're targeting firefox. To stay within SVG, make a group and use the background: <g transform="translate(1000,200)" > <use xlink:href="#storyCard"/> <text x="20" y="80" font-size="45" font-weight="bold" font-family="Comic Sans MS, cursive"> My Dummy Story </text> </g>