Как импортировать SVG в NextJS
- Published on
- Authors
- Name
- Vasiliy Kramarenko
- @kramvas07
![](https://kramarenko.com.ua/api/files/1_IJVjj4QEG_N5TUKTZ9eTFQ1596.jpeg)
Если вы когда-нибудь пытались импортировать SVG файл в свой проект NextJS вы наверняка сталкивались со следующей ошибкой.
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type
В этой ошибке webpack сообщает нам, что у него нет настроенного загрузчика, для обработки этого конкретного типа файлов. (.svg). Помните, что с webpack нам нужны loaders для предварительной обработки любых файлов, не относящихся к JavaScript. Эти загрузчики помогают нам импортировать файлы CSS, изображения, видео и, в нашем случае, файлы SVG.
Как импортировать SVG в ваше NextJS приложение
1. SVGR
SVGR это инструмент, который позволяет нам импортировать SVG-файлы в ваши приложения React как компоненты React. Если вы раньше использовали create-react-app, возможно, вы уже знакомы с этим, поскольку оно встроено.
Чтобы использовать SVGR в нашем проекте, нам нужно сначала установить зависимость @svgr/webpack, а затем внести изменения наш next.config.js файл следующим образом. Для получения дополнительной информации о настройке конфигурации webpack ознакомьтесь с официальной документацией.
2. babel-plugin-react-svg
Если вы предпочитаете использовать плагин babel вместо webpack, вы можете использовать babel-plugin-inline-react-svg для импорта SVG файла как компонента React.
Начните с установки зависимости, а затем создайте .babelrc в корне вашего проекта со следующим содержимым.
{
"presets": ["next/babel"],
"plugins": ["inline-react-svg"]
}
Дополнительную информацию о пользовательской конфигурации Babel с NextJS можно найти на сайте с официальной документацией.
3. next-images
next-images это плагин, который позволяет вам импортировать все типы изображений в ваше приложение NextJS. По умолчанию он позволяет импортировать изображения jpg, jpeg, png, svg, fig, ico, webp, иjp2.
Использовать next-images, начните с установки пакета, а затем создайте файл next.config.js.
Если вы используете next-images для импорта ваших файлов SVG, вам нужно будет использовать их как простые изображения. Если вы предпочитаете импортировать SVG как компоненты React, но по-прежнему хотите использовать next-images чтобы импортировать другие изображения, вы должны настроить свою конфигурацию, чтобы исключить каталог, в котором вы храните свои SVG-файлы, и использовать или SVGR или babel-plugin-react-svg для ваших файлов SVG.
4. Простой тег изображения
Если вы хотите, чтобы все было просто, вы всегда можете использовать свои SVG-файлы с простыми тегами изображений и не импортировать их вместе. Для этого просто поместите свои изображения SVG в public папку, а затем ссылайтесь на них из своих компонентов React.
<img src='/twitter.svg' alt='twitter logo' />
Для получения дополнительной информации о загрузке статических файлов с директории public ознакомьтесь с официальной документацией NextJS.
5. Скопируйте и вставьте SVG
Допустим, у вас есть следующий SVG-файл круга.
Просто создайте файл с именем Circle.js, и скопируйте в него содержимое вашего SVG. Но сначала убедитесь, что вы преобразовали HTML в разметку JSX. Вы можете использовать этот удобный инструмент.
Теперь вы можете использовать Circle, как любой другой компонент React в своем приложении, без установки каких-либо дополнительных зависимостей.
TypeScript
Пользователи TypeScript могут увидеть следующую ошибку при попытке импортировать SVG в свое приложение.
Cannot find module './Twitter.svg' or it's corresponding type definitions.
Чтобы устранить эту ошибку, начните с создания папки с именем @types в корне вашего проекта. Затем создайте файл с именем index.d.ts со следующими кодом.
declare module "*.svg" {
const content: any;
export default content;
}
Это должно устранить ваши ошибки и позволить вашему проекту скомпилировать приложение.