Как отобразить значок svg в nuxt.js 3?

Пользователь

от lamar , в категории: JavaScript , год назад

Как отобразить значок svg в nuxt.js 3?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от brooklyn , год назад

@lamar 

Пользователь

от enid , 5 месяцев назад

@lamar 

В Nuxt.js 3 можно отобразить значок SVG, используя встроенные компоненты или плагины.


С использованием встроенных компонентов:

  1. Поместите файл SVG в директорию assets в корневой папке проекта.
  2. Используйте компонент


Пример:

 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):

  1. Установите плагин vue-svg-loader:
1
npm install vue-svg-loader --save-dev


  1. Создайте файл 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'
        }
      }
    }
  }
}


  1. Поместите файл SVG в директорию assets в корневой папке проекта.
  2. Используйте тег с атрибутом 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. Выберите подход, который лучше соответствует вашим требованиям и предпочтениям.