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

Для настройки путей к 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 файлам, должны быть исправлены.

Я использую <a href="https://www.npmjs.com/package/vite-plugin-svg-sprite" rel="nofollow">vite-plugin-svg-sprite</a> с настройками <br/> <pre><code class="javascript">{
  symbolId: 'icon-[name]-[hash]',
  include: ['**/src/assets/icons/**/*.svg']
}</code></pre> <br/> <br/> все, что лежит в src/assets/icons собирается в спрайт, по месту использования надо делать как-то так: <br/> <pre><code class="javascript">import iconSettings from 'assets/icons/settings.svg'</code></pre> <br/> <br/> <pre><code class="html">&lt;svg xmlns="http://www.w3.org/2000/svg"&gt;
  &lt;use :href="`#${iconSettings}`"/&gt;
&lt;/svg&gt;</code></pre> <br/> <br/> (я, конечно, использую компонент-обертку) <br/> <br/> А вообще пути с "../../../../" - зло, надо настроить алиасы (jsconfig + vite.config.js или что там (например я чаще всего использую quasar и там это quasar.config.js). например у меня assets - это алиас на src/assets)