Понял спасибо

А как svg конвертировать?

Как svg

мы svg на S3 храним, а в приложении используем <img src=" " />

иначе html может просто гиганской быть если много повторяющихся иконок

import React from 'react';
import classNames from 'classnames';
import { ReactSVG } from 'react-svg';
import styles from './styles';

const Img =({
 image, className, iconSize,
}) => {
 const options = { style: {} };

 if (iconSize) options.style.fontSize = ${iconSize}px;
 return (
   <ReactSVG
     src= {require(`./fa/${image}.svg`)}
     wrapper="span"
     className={classNames(styles.icon, className)}
     {...options}
   />
 );
};
export default Img;

./src/components/inline/icon/fa/fa-newspaper.svg 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M552 64H88c-13.234 0-24 10.767-24 24v8H24c-13.255 0-24 10.745-24 24v280c0 26.51 21.49 48 48 48h504c13.233 0 24-10.767 24-24V88c0-13.233-10.767-24-24-24zM32 400V128h32v272c0 8.822-7.178 16-16 16s-16-7.178-16-16zm512 16H93.258A47.897 47.897 0 0 0 96 400V96h448v320zm-404-96h168c6.627 0 12-5.373 12-12V140c0-6.627-5.373-12-12-12H140c-6.627 0-12 5.373-12 12v168c0 6.627 5.373 12 12 12zm20-160h128v128H160V160zm-32 212v-8c0-6.627 5.373-12 12-12h168c6.627 0 12 5.373 12 12v8c0 6.627-5.373 12-12 12H140c-6.627 0-12-5.373-12-12zm224 0v-8c0-6.627 5.373-12 12-12h136c6.627 0 12 5.373 12 12v8c0 6.627-5.373 12-12 12H364c-6.627 0-12-5.373-12-12zm0-64v-8c0-6.627 5.373-12 12-12h136c6.627 0 12 5.373 12 12v8c0 6.627-5.373 12-12 12H364c-6.627 0-12-5.373-12-12zm0-128v-8c0-6.627 5.373-12 12-12h136c6.627 0 12 5.373 12 12v8c0 6.627-5.373 12-12 12H364c-6.627 0-12-5.373-12-12zm.029l-43.829 25.309a200.15 200.15 0 0 1-33.849-58.528l43.819-25.289c-7.63-41.299-7.634-46.719 0-88.038l-43.819-25.289c7.85-21.229 19.31-41.049 33.849-58.529l43.829 25.309c31.984-27.397 36.66-30.078 76.168-44.029V58.845a200.917 200.917 0 0 1 67.618 0v50.599c39.504 13.95 44

Причем ругается на все svg

Чем не устраивает тот вариант, что написали?

Про импорт?

Да

У меня динамически судя по коду устанавливается svg

Может тогда вставишь как img src?

Смотря какие иконки

Господа поделитесь, сколько у вас в среднем перфоманс по лайтхаусу?

Прошу прощения за ожидание. Каким образом мне динамически обращаться к этому пропсу, если название всегда разное? Если я делаю запрос без переменной, то все выглядит хорошо.
А на счет создания каждый раз, вот код
https://github.com/vercel/next.js/blob/canary/examples/with-apollo/lib/apolloClient.js

В next есть какая то фича, чтобы вернутся на прошлую страничку

router.back()

где самый важный знак препинания?

В конце 🌚