Предисловие
Значки SVG имеют много преимуществ перед png/jpeg для SVGS, поскольку они меньше по размеру и могут программироваться, например, изменять свойства CSS и анимацию.
В этой статье мы рассмотрим, как использовать иконки SVG в проекте Next.js. Есть 4 способа отображения значков SVG:
- Использование компонента
Image
Next.js - С помощью СВГР
- Встроить содержимое SVG в JSX
- Сделайте 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 | ЛинкедИн | "Новостная рассылка"
🚀👉 Размещение таких разработчиков, как вы, в топовых стартапах и технологических компаниях