Предисловие

Значки SVG имеют много преимуществ перед png/jpeg для SVGS, поскольку они меньше по размеру и могут программироваться, например, изменять свойства CSS и анимацию.

В этой статье мы рассмотрим, как использовать иконки SVG в проекте Next.js. Есть 4 способа отображения значков SVG:

  1. Использование компонента Image Next.js
  2. С помощью СВГР
  3. Встроить содержимое SVG в JSX
  4. Сделайте SVG константной переменной JavaScript

Использование компонента изображения Next.js

Каждый раз, когда мы используем create-next-app для создания проекта Next.js, мы видим, что каталог public содержит vercel.svg, на который ссылается файл page/index.tsx. Значок SVG отображается как изображение:

Image — это компонент Next.js, который является расширением HTML-элемента <img> с различными оптимизациями производительности.

Если вы не хотите использовать этот компонент, вы можете напрямую использовать элемент <img>.

<img src="/vercel.svg"" alt="Vercel Logo" />

Использование СВГР

SVGR — это инструмент для преобразования SVG в компонент React, который поддерживает Webpack, Rollup.js, Next.js и т. д.

Для проекта Next.js нам нужно сначала установить загрузчик @svgr/webpack:

npm install --save-dev @svgr/webpack

Затем измените next.config.js в корневом каталоге проекта Next.js и настройте @svgr/webpack :

module.exports = {
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/i,
      issuer: /\.[jt]sx?$/,
      use: ['@svgr/webpack'],
    })
    return config
  },
}

Затем в нашем коде мы можем импортировать значок SVG как обычный компонент React:

import VercelLogo from '../public/vercel.svg';
const Footer = () => {
  return <footer> <VercelLogo /> </footer>
};

React отобразит значок SVG как элемент html <svg>, поэтому мы можем изменить цвет или другие свойства с помощью CSS.

Встроить содержимое SVG в JSX

Значок SVG основан на элементе html <svg>, мы также можем встроить содержимое SVG в JSX:

const Footer = () => {
  return (
    <footer>
      <svg width="283" height="64" viewBox="0 0 283 64" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
      </svg>
    </footer>
  );
}

Но это может загромождать JSX, и это будет катастрофой, когда нам понадобится заменить или импортировать больше значков SVG.

Сделайте SVG константной переменной JavaScript

Как мы знаем, React поддерживает рендеринг строки как html, используя свойство dangerouslySetInnerHTML. Таким образом, мы можем сделать svg константной переменной:

const logoString = '<svg width="283" height="64" viewBox="0 0 283 64" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/></svg>'
const Footer = () => {
  return  <footer  dangerouslySetInnerHTML={{__html: logoString}} />;
};

При использовании dangerouslySetInnerHTML весь html в строке сохраняется, что может подвергнуть ваших пользователей атаке XSS. Альтернативой может быть использование библиотеки html-react-parser, которая преобразует строку HTML в компонент React.

Заключение

В этой статье мы узнаем 4 способа использования значков SVG в проекте Next.js. Если вам нужно изменить цвет значка SVG при наведении курсора, способ изображения не подходит.

В моих проектах чаще всего используется SVGR, потому что он делает иконки SVG как компонент React, а самая важная особенность React основана на компонентах.

Повышение уровня кодирования

Спасибо, что являетесь частью нашего сообщества! Перед тем, как ты уйдешь:

  • 👏 Хлопайте за историю и подписывайтесь на автора 👉
  • 📰 Смотрите больше контента в публикации Level Up Coding
  • 🔔 Подписывайтесь на нас: Twitter | ЛинкедИн | "Новостная рассылка"

🚀👉 Размещение таких разработчиков, как вы, в топовых стартапах и технологических компаниях