How do I use a Font Awesome icon for a custom Gute

问题:

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?

回答1:

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" } )
);

回答2:

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! ;)