javascript 在Vue.js & Vite中动态内联导入原始SVG

e5nqia27 于 2023-01-29 发布在 Java

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

因此，我尝试在Vite上使用内联导入将SVG作为字符串导入到我的Vue组件中，如下所示

<script>
const getSvgIcon = async (name) => {
  const module = await import(`../icons/${name}.svg?raw`)
  return module.default
}

export default {
  props: {
    name: String,
  },
  data() {
    return {
      svg: null,
    }
  },
  watch: {
    name: {
      async handler(name) {
        this.svg = await getSvgIcon(name)
      },
      immediate: true,
    },
  },
}
</script>

<template>
  <div v-html="svg"></div>
</template>

在npm run dev模式下运行时，这一点很好。
然而，这个问题发生在运行npm run build时，我最终得到Error: Unknown variable dynamic import，显然是因为我使用了?raw后缀。
有没有解决办法，或者这是一个障碍，由维特到现在？

JavaScript

来源：https://stackoverflow.com/questions/71176408/dynamic-inline-importing-raw-svg-in-vue-js-vite

2条答案

按热度按时间

l7wslrjt1#

正如@tony19所评论的，这可能是一个bug。我打开了一个问题，你可以关注here。*

作为使代码正常工作的解决方法，请遵循以下步骤：

步骤1：

把你所有的SVG都变成Vue组件。这样你就可以有更好的管理。为了做到这一点，你只需要编辑文件名，把它从.svg替换成.vue，并把内容 Package 在template标签里。
如果你想保留svg文件，你可以使用vite-svg-loader插件，并与此，你将能够做到：
import IconComponent from './my-icon.svg?component'

第二步：

创建SVG图标组件：

<script>
import { defineAsyncComponent } from 'vue';

export default {
  props: {
    name: {
      type: String,
      required: true,
    },
  },

  computed: {
    dynamicComponent() {
      const name = this.name;

      return defineAsyncComponent(() => import(`./icons/${name}.vue`));
    },
  },
};
</script>

<template>
  <component :is="dynamicComponent" />
</template>

步骤3

现在您可以导入SvgIcon.vue并使用SVG图标的名称，如下所示：

<script>
import SvgIcon from './components/SvgIcon.vue'

export default {
  components: {
    SvgIcon
  }
}
</script>

<template>
  <SvgIcon name="user" />
</template>

See it live on Stackblitz
如果你喜欢上面的方法，我最近写了一篇关于它的文章：
Unified SVG icons with Vite, Vue 3, Quasar and Pinia

赞(0）回复(0）举报 2023-01-29

uujelgoq2#

看看我自己创造的这个例子。

<template>
    <i v-html="svg" />
</template>

<script lang="ts" setup>
    import { computed } from 'vue';

    const props = defineProps({
        icon: {
            type: String,
            required: true,
        },
        src: {
            type: String,
            default: '',
        },
    });
    const path = props.src ? props.src : '';
    const file = `${path}icon-${props.icon}`;
    const modules = import.meta.glob('../../assets/icons/**/*.svg', {
        as: 'raw',
        eager: true,
    });
    const svg = computed(() => {
        return modules['../../assets/icons/' + file + '.svg'] ?? modules['../../assets/icons/icon-logo-cone.svg'];
    });
</script>

这就是将SVG动态加载到一个漂亮的最小化组件中所需要的全部内容。
啊，别忘了你也可以改变你的svg的颜色，通过使用普通的css。
用法：

<UiIcon
    class="w-4 text-gray-600"
    icon="search"
/>

赞(0）回复(0）举报 2023-01-29

我来回答

javascript 在Vue.js & Vite中动态内联导入原始SVG

2条答案

步骤1：

第二步：

步骤3

相关问题

热门标签

最新问答