Реагировать на компонент как backgroundImage

Question

Я использую в своем проекте значки реакции, и этот замечательный пакет предлагает все изображения бесплатных шрифтов в одном месте и служит в качестве компонента реакции.

то, что я пытаюсь достичь, - это установить backgroundImage из компонента, например:

<content className="content cover-content" style={{backgroundImage: `url(${<FaCar size={48} color="red"/>})`}}>

и я не уверен, почему это не работает, теоретически должно работать, любая идея?

Answer 1

backgroundImage - это свойство CSS, которому требуется URL-путь к изображению, вы можете загрузить значок и добавить его локально в свой проект.

Или вы можете добиться того же результата, используя свойство CSS z-index

Используя стилизованные компоненты, мы можем стилизовать компонент, добавив его за основным содержимым, используя свойство CSS z-index.

 const Icon = styled.section`
      ..
      z-index: -1;
    `;

Затем мы добавляем его вокруг значка, чтобы придать ему нужный стиль.

          <Icon>
            <FaCar />
          </Icon>

Ссылка на песочницу:https://codesandbox.io/s/wild-grass-sk9d9?file=/src/App.js

Answer 2

Это не может работать, потому что правила CSS не могут содержать HTML-код. Используя компонент React, вы делаете именно это. Единственный способ указать здесь фоновое изображение - использовать стандартный способ, указав URL-адрес изображения в вашем правиле CSS.

Answer 3

Создайте компонент для повторного использования

      import React from 'react';
import ReactDOMServer from 'react-dom/server';

const BackgroundIcon = ({ onClick = () => { }, children, className, Icon, backgroundImgSize = 124, top = 20, right = 20 }) => {
    const iconString = ReactDOMServer.renderToString(<Icon />);
    const encodedIcon = encodeURIComponent(iconString);
    const backgroundImage = `url("data:image/svg+xml;charset=UTF-8,${encodedIcon}")`;
return (
    <div
        onClick={onClick}
        style={{
            backgroundImage,
            backgroundSize: `${backgroundImgSize}px`,
            backgroundRepeat: 'no-repeat',
            backgroundPosition: `${top}% ${right}%`,
        }}
    >
        {children}
    </div>
    );
};

export default BackgroundIcon;

И используйте его вот так

      <BackgroundIcon
backgroundImgSize={124}
Icon={() => <AnIcon >}
strokeWidth={1.2} />}
top={98}
right={0}
> </BackgroundIcon>