Как импортировать svg из node_modules?

Для импорта SVG из node_modules в проект, использующий Vue.js, можно выполнить несколько шагов.

1. Убедитесь, что у вас установлен пакет vue-svg-loader. Этот пакет позволяет использовать загрузчик SVG с webpack в проекте Vue.js. Вы можете установить его с помощью npm, выполнив команду:

npm install vue-svg-loader --save-dev

2. Создайте директорию assets внутри папки src. В этой директории вы сможете хранить ваши SVG-файлы.

3. Поместите нужный SVG-файл в директорию assets. Например, пусть ваш файл называется logo.svg.

4. В компоненте, в котором вы хотите использовать SVG, импортируйте его следующим образом:

import Logo from '@/assets/logo.svg';

Обратите внимание на символ @ в пути импорта. Vue-cli настроено таким образом, что для пути @ используется алиас к папке src.

5. Создайте новый компонент и установите его свойство components:

export default {
  name: 'MyComponent',
  components: {
    Logo
  }
};

6. В шаблоне компонента используйте импортированный SVG следующим образом:

<template>
  <div>
    <Logo />
  </div>
</template>

Теперь SVG-изображение будет отображаться в вашем компоненте. Вы можете использовать стили, классы и атрибуты, как и с любыми другими элементами во Vue.js.

Это распространенный подход для импорта SVG-файлов в проект Vue.js. Он позволяет легко управлять SVG-изображениями и использовать их в ваших компонентах.