Как отобразить значок svg в nuxt.js 3?
2 ответа
от
enid ,
2 года назад
@lamar
В Nuxt.js 3 можно отобразить значок SVG, используя встроенные компоненты или плагины.
С использованием встроенных компонентов:
- Поместите файл SVG в директорию assets в корневой папке проекта.
- Используйте компонент
Пример:
1 2 3 4 5 6 7 8 9 10 |
<template>
<div>
<NuxtImage
src="~/assets/icon.svg"
alt="Icon"
width="50"
height="50"
/>
</div>
</template>
|
С использованием плагина (например, vue-svg-loader):
- Установите плагин vue-svg-loader:
1
|
npm install vue-svg-loader --save-dev |
- Создайте файл nuxt.config.js в корневой папке проекта и добавьте следующую конфигурацию:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
export default {
build: {
loaders: {
vue: {
transformAssetUrls: {
img: ['src'],
image: ['xlink:href', 'href'],
'b-avatar': 'src',
'b-img': 'src',
'b-img-lazy': ['src', 'blank-src'],
'b-card': 'img-src',
'b-card-img': 'img-src',
'b-card-img-lazy': ['src', 'blank-src'],
'b-carousel-slide': 'img-src',
'b-embed': 'src'
}
}
}
}
}
|
- Поместите файл SVG в директорию assets в корневой папке проекта.
- Используйте тег с атрибутом src для отображения SVG.
Пример:
1 2 3 4 5 |
<template>
<div>
<img src="~/assets/icon.svg" alt="Icon" width="50" height="50" />
</div>
</template>
|
Оба подхода позволяют отобразить значок SVG в Nuxt.js 3. Выберите подход, который лучше соответствует вашим требованиям и предпочтениям.
15