Как разрешить пути к SVG во Vue-проекте?

Question

[shsv382]

Для своих старых проектов на React я в свое время написал SASS-скрипт:

%icon {
  display: inline-block;
  mask-position: center center;
  mask-size: 100%;
  mask-repeat: no-repeat;
}

$items: check, close, error; // ...

@each $item in $items {
  .icon-#{$item} {
    @extend %icon;
    mask-image: url(../../svg/#{$item}.svg);
  }
}

То есть я просто закидываю в нужную папку SVG-файл, пишу его имя в SASS-массив, и мне доступны красивые иконки, которые я могу ресайзить, раскрашивать градиентами и т.д.
Проблема началась во Vue-проекте, который по-другому обрабатывает пути. Мне пришлось закинуть папку svg в puplic (не в src как в React), и теперь ESLint ругается на них:
../../svg/mark.svg referenced in /Users/username/git/myproject/frontend/src/components/Pricing/PlanCompareTitles.vue?vue&type=style&index=0&lang.scss didn't resolve at build time, it will remain unchanged to be resolved at runtime

Заказчик настаивает на устранении ошибок линтера. Как можно настроить, чтобы SVG лежали в папке src, а копирование происходило при сборке? Сборщик Vite

Comments

[its2easyy]

Это ошибка не eslint, а vite.
Если ассет в public, то и путь к нему должен быть абсолютный, а не относительный, в ошибке почему то относительный

Answer 1

[Антон Антон]

Я использую 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)

Comments

[shsv382]

в принципе это дело, но я сторонник не включать svg в код как элемент, маски по мне более гибкий способ

Answer 2

[Сергей delphinpro]

Если вы кладете картинку в public, то нужно указывать абсолютный путь к ней. Такие пути не будут обрабатываться.

mask-image: url(/svg/#{$item}.svg);

Можно хранить картинки в src (не знаю, почему вы решили, что нельзя). Тогда пути к ним следует указывать относительные и они будут обрабатываться сборщиком.

Comments

[shsv382]

а почему вы решили, что я кладу картинку в public? смысл вопроса как раз в том, чтобы svg при разработке лежали в src и были доступны в итоговой сборке. в react такое работает из коробки, во vue не сработало

[shsv382]

то, что картинки в public - временный костыль, пока я разбираюсь, как сделать по-другому

[Сергей delphinpro]

а почему вы решили, что я кладу картинку в public?

Потому что вы сами это написали:

Мне пришлось закинуть папку svg в puplic

[shsv382]

Сергей delphinpro,

Можно хранить картинки в src (не знаю, почему вы решили, что нельзя). Тогда пути к ним следует указывать относительные и они будут обрабатываться сборщиком.

вот если коротко, то у меня не обрабатываются. И суть вопроса - сделать так, чтобы обрабатывались )))