@shsv382

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

Для своих старых проектов на 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
  • Вопрос задан
  • 73 просмотра
Пригласить эксперта
Ответы на вопрос 2
Fragster
@Fragster
помогло? отметь решением!
Я использую 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)
Ответ написан
delphinpro
@delphinpro
frontend developer
Если вы кладете картинку в public, то нужно указывать абсолютный путь к ней. Такие пути не будут обрабатываться.

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

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы