Для импорта 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-изображениями и использовать их в ваших компонентах.