через data:image/svg+xml можно

о, спасибо, сейчас попробую

просто так это сделать почему-то не вышло, свг парсится как [object Object]. Сделал вот так:

import { renderToStaticMarkup } from 'react-dom/server'

const SvgComponent = () =>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
  >
    <path
      d=""
      fill=""
    />
  </svg>

  const svgString = encodeURIComponent(renderToStaticMarkup(<SvgComponent />))
  const dataUri = `url("data:image/svg+xml,${svgString}")`

это норм или можно было как-то проще?

import { renderToStaticMarkup } from 'react-dom/server'

const SvgComponent = () =>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
  >
    <path
      d=""
      fill=""
    />
  </svg>

  const svgString = encodeURIComponent(renderToStaticMarkup(<SvgComponent />))
  const dataUri = `url("data:image/svg+xml,${svgString}")`

А, так если у тебя свг в jsx, что мешает просто зарендерить через реакт?

этот свгшник должен пойти потом бэкграундом через инлайн стили:

    <div style={{
        backgroundImage: dataUri,
      }}
    />

Обязательно через цсс? Дропни через абсолютное позиционирование например. Или если это статика, сохрани в .svg файл

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

Вадим Макєєв тему з зірочками рейтингу в себе на ютуб каналі розібрав по запчпстинам. Відкрий відос подивись і не страждай ;)

https://youtu.be/EbajTYI-gg8

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

Имхо, вполне вариант. Мы так делаем, каждый svg сделан как компонент, цвет прокидываем пропсами ))

Сделай спрайт свгшный, их можно красить цссом

Всем привет! Нужна помощь, есть таки блоки, при нажатии на одну из карточку должна менятся только левая сторона, а правая оставаться на месте. Как кто правильно сделать?

Через хук. В компоненте над этими двумя, записываешь в стейт куда именно кликнули, а в правом в зависимости от того, куда кликнули меняешь UI.

Ну точнее наоборот.

А через props.children?

Не обязательно. Вот у тебя общий компонент в котором правый и левый компоненты раздельно. Ты можешь в "общей вьюхе" на этом уровне, сделать хук состояния useState. Передать этот хук в оба компонента. Там где нужно менять вью, там будет условия на какое-либо значение стейта. А то, что будет менять, будет это делать через функцию изменения хука.

Спасибо за совет

Router
       => Layout (Header, Footer, Aside, SideBar). Main part is Route
               => Route (Home)
               => Route (Inner)
       => Layout2 (Header, Footer, Aside, SideBar)
               => Route (Description)
               => Route (FaQ)

Я хотел установить и настроить ESLint и Prettier чтоб как у про ) начал делать по какому-то западному видео мудреные настройки, но у видел в комментариях такое "create-react-app already contains eslint and eslint-config-react-app so basically just needs to install prettier dependencies and add .eslintrc.json" Так что ничего устанавливать не нужно? Нужно только настройки задать? Или как?