javascript 如何在nuxt3 vite项目中添加内嵌SVG

yrdbyhpb 于 2023-03-11 发布在 Java

关注(0)|答案(2)|浏览(369)

你好，一直有麻烦导入内嵌svgs到我的nuxt 3 vite项目。任何建议将不胜感激。
我发现这个可以工作<img src="~/assets/images/icons/push-icon-chatops.svg" />，但是我需要一个内联项目。所以我会做一些像这样的<div v-html="rawNuxtLogo" />和这样的事情（需要在vite中不工作）。

setup(props) {
        const currentIcon = computed(() => {
            return defineAsyncComponent(() =>
                import(`~/assets/images/icons/push-icon-chatops.svg'?inline`)
            );
        }).value;

        return {
            currentIcon,
        };
    },

然而我发现vite确实很奇怪地导入，结果要么是v-html中显示的url字符串，要么是一个无法读取的对象
我正在尝试使用这个插件没有成功.
https://github.com/nuxt-community/svg-module

JavaScript

来源：https://stackoverflow.com/questions/73917316/how-to-add-inline-svgs-in-a-nuxt3-vite-project

2条答案

按热度按时间

flmtquvp1#

所以看起来vite实际上与@nuxtjs/svg插件不兼容。所以答案是安装一个vite特定的插件在这种情况下我安装了vite plugin然后这样做

vite: {
    plugins: [
        svgLoader()
    ]
},

赞(0）回复(0）举报 2023-03-11

vohkndzv2#

对于TS Nuxt 3项目，它会是这样的。
nuxt.config.ts文件：

import svgLoader from 'vite-svg-loader'

export default defineNuxtConfig({
  // Rest of your config.
  vite: {
    plugins: [
      svgLoader({ // Your settings. }),
    ],
  },
})

组件示例：

<template>
  <div>
    <ArrowLeft />
  </div>
</template>

<script setup lang="ts">
import ArrowLeft from '../assets/svg/arrow-left.svg?component'
</script>

注意，最后的?component很重要，否则TS会抱怨。

赞(0）回复(0）举报 2023-03-11

我来回答

javascript 如何在nuxt3 vite项目中添加内嵌SVG

2条答案

相关问题

热门标签

最新问答