2

I am following a tutorial by Zac Gordon regarding how to use the SVG path for a custom icon of a Gutenberg block. I'm looking to use the Info Circle from Font Awesome.

I have the following defined for the icon element but the icon space is empty:

const iconEl = el('svg', { width: 20, height: 20 },
 el('path', { d: "M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z" } )
);

Any ideas?

2 Answers 2

4

Success! I had to pass the viewBox attribute from the Font Awesome SVG file. The code below worked for me:

const iconEl = el('svg', { width: 20, height: 20, viewBox: '0 0 512 512' },
 el('path', { d: "M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z" } )
);
1
  • 3
    Thank you so much for going back and taking the time to share the solution you found to your problem. I was struggling with that the whole day and your solution finally helped. I though I'll let you know that you made a difference in someones life today :)
    – JonasB
    Nov 5, 2018 at 21:23
0

You could even improve your code's readability a little bit more by using JSX, like so:

const icon = () => {
    return (
        <svg width="20px" height="20px" viewBox="0 0 24 24">
            <path d="M12,2c-5.522,0 -10,4.479 -10,10c0,5.524 4.478,10 10,10c5.522,0 10,-4.476 10,-10c0,-5.521 -4.478,-10 -10,-10Zm0,4.435c0.935,0 1.694,0.759 1.694,1.694c0,0.935 -0.759,1.694 -1.694,1.694c-0.935,0 -1.694,-0.759 -1.694,-1.694c0,-0.935 0.759,-1.694 1.694,-1.694Zm2.258,10.242c0,0.268 -0.217,0.484 -0.484,0.484l-3.548,0c-0.267,0 -0.484,-0.216 -0.484,-0.484l0,-0.967c0,-0.268 0.217,-0.484 0.484,-0.484l0.484,0l0,-2.581l-0.484,0c-0.267,0 -0.484,-0.216 -0.484,-0.484l0,-0.967c0,-0.268 0.217,-0.484 0.484,-0.484l2.58,0c0.268,0 0.484,0.216 0.484,0.484l0,4.032l0.484,0c0.267,0 0.484,0.216 0.484,0.484l0,0.967Z" />
        </svg>
    );
};

export default icon;

I took the liberty to adjust your viewBox values. It should match or be proportionate to your icon size.

Good luck with it! ;)

2
  • I tried changing the viewBox attribute to match the icon size but the space ended up empty again. css-tricks.com/scale-svg/#article-header-id-3
    – epierpont
    Nov 15, 2018 at 14:43
  • Yes, you are correct, @epierpont It's not as simple as modifying the viewBow values. That's why I properly edited the SVG code and updated my answer. It should work now :) Nov 16, 2018 at 16:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.