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

Question

所以我尝试使用 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 后缀。

有没有解决方案或者这是 Vite 的障碍？

Answer 1

正如 @tony19 评论的那样，这可能是一个错误。我打开了一个问题，你可以关注here。

作为使您的代码正常工作的解决方法，请执行以下操作：

第1步：

将所有 SVG 转换为 Vue 组件。这样，您可以进行更好的管理。为此，您只需编辑文件名，将 .svg 替换为 .vue 并将内容包装在 template 标签内。

如果你想保留 svg 文件，你可以使用 vite-svg-loader 插件，你可以这样做：

import IconComponent from './my-icon.svg?component'

第2步：

创建一个 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

Answer 2

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

<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 所需的全部内容。

啊，不要忘记，您还可以使用纯 css 更改 svg 的颜色。

用法：

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