Как использовать значок Font Awesome для пользовательского блока Гутенберга?

Question

Я следую учебнику , написанному Заком Гордоном о том, как использовать путь SVG для пользовательского значка блока Гутенберга. Я собираюсь использовать информационный круг от Font Awesome .

Для элемента значка определено следующее, но пространство значков пусто:

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

Вы можете даже улучшить читабельность своего кода, используя 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 значения. Он должен соответствовать или быть пропорционален размеру вашего значка.

Удачи с этим! ;)

Answer 2

Успех! Мне пришлось передать атрибут viewBox из SVG-файла Font Awesome. Код ниже работал для меня:

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