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

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

от brook , в категории: JavaScript , 2 месяца назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

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

от nicola , 8 дней назад

@brook 

  1. Установите пакет @nuxtjs/svg-loader: npm install --save-dev @nuxtjs/svg-loader
  2. Создайте файл конфигурации nuxt.config.js, если его еще нет, и добавьте следующий код:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
build: {
  loaders: {
    vue: {
      transformAssetUrls: {
        // добавить поддержку загрузки svg
        // изображений в html, css и в svg
        'svg': 'src'
      }
    }
  }
},
buildModules: [
  '@nuxtjs/svg-loader',
],


  1. Сохраните ваш svg-файл в папку ~/assets/svg/
  2. Используйте ваш svg-файл в шаблоне следующим образом:
1
2
3
4
5
6
7
  
    
      
    
  


Где my-icon.svg - это имя вашего svg-файла, а my-icon - это имя идентификатора нужного изображения внутри файла.