如何为自定义古腾堡块使用 Font Awesome 图标？

Question

我正在关注 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。

我为图标元素定义了以下内容，但图标 space 是空的：

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

有什么想法吗？

Answer 1

成功！我必须从 Font Awesome SVG 文件传递 viewBox 属性。下面的代码对我有用：

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

Answer 2

您甚至可以通过使用 JSX 进一步提高代码的可读性，如下所示：

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;

我冒昧地调整了你的 viewBox 值。它应该与您的图标大小匹配或成比例。

祝你好运！ ;)

如何为自定义古腾堡块使用 Font Awesome 图标？

How do I use a Font Awesome icon for a custom Gutenberg block?

wordpress

wordpress-gutenberg