Как настроить пути к SVG файлам в проекте на Vue?

Как настроить копирование SVG иконок из папки `src` в папку `public` при сборке проекта с использованием сборщика Vite, чтобы избежать ошибок линтера, возникших из-за путей к файлам SVG в Vue-проекте?
  • 18 апреля 2024 г. 14:20
Ответы на вопрос 2
Для настройки путей к SVG файлам в проекте на Vue можно использовать файл `vite.config.js` для сборщика Vite. В этом файле можно добавить плагин `vite-plugin-svg-icons`, который позволит автоматически копировать SVG иконки из папки `src` в папку `public` при сборке проекта. Для этого необходимо установить данный плагин с помощью npm:

```bash
npm install vite-plugin-svg-icons --save-dev
```

Затем в файле `vite.config.js` добавить следующий код:

```javascript
import svgIcons from 'vite-plugin-svg-icons';

export default {
  plugins: [
    svgIcons({
      iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
      symbolId: 'icon-[dir]-[name]',
    }),
  ],
};
```

Этот код настроит плагин для копирования иконок из папки `src/assets/icons` в папку `public`. Кроме того, каждая иконка будет иметь уникальный `id`, сгенерированный на основе имени файла.

Таким образом, при сборке проекта иконки будут скопированы в папку `public` и будут доступны по правильным путям.

После настройки путей к SVG файлам и копирования иконок в папку `public` следует обновить пути к иконкам в компонентах Vue, чтобы они указывали на новые пути, например:

```vue
<template>
  <div>
    <img src="/assets/icons/icon-name.svg" alt="Icon" />
  </div>
</template>
```

После этого ошибки линтера, связанные с путями к SVG файлам, должны быть исправлены.
Я использую vite-plugin-svg-sprite с настройками 
{
  symbolId: 'icon-[name]-[hash]',
  include: ['**/src/assets/icons/**/*.svg']
}


все, что лежит в src/assets/icons собирается в спрайт, по месту использования надо делать как-то так:
import iconSettings from 'assets/icons/settings.svg'


<svg xmlns="http://www.w3.org/2000/svg">
  <use :href="`#${iconSettings}`"/>
</svg>


(я, конечно, использую компонент-обертку)

А вообще пути с "../../../../" - зло, надо настроить алиасы (jsconfig + vite.config.js или что там (например я чаще всего использую quasar и там это quasar.config.js). например у меня assets - это алиас на src/assets)
Похожие вопросы