如何为自定义古腾堡块使用 Font Awesome 图标? [英] How do I use a Font Awesome icon for a custom Gutenberg block?

问题描述

我正在关注 Zac Gordon 的教程 关于如何将 SVG 路径用于 Gutenberg 块的自定义图标.我希望使用 来自 Font Awesome 的信息圈.

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

有什么想法吗?

推荐答案

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

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

这篇关于如何为自定义古腾堡块使用 Font Awesome 图标?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！