Как оформить React-иконки

Question

Я пытаюсь понять, как стилизовать иконки, которые я импортирую, используя react-icons.

В частности, я хотел бы иметь возможность создать вид, подобный следующему:

То есть я хотел бы добавить цвет фона, отступы, радиус границы и т. Д. Однако я не могу найти простой способ сделать это.

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

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

Answer 1

Используйте IconContext, как указано в Документах .

function BlueLargeIcon() {
  return (
    <IconContext.Provider
      value={{ color: 'blue', size: '50px' }}
    >
      <div>
        <FaBeer />
      </div>
    </IconContext.Provider>
  );
}