Nuxt Svg组件刷新闪烁

Question

Nuxt 使用这个Svg 组件刷新页面会闪烁

components\SvgIcon

<template>
  <svg aria-hidden="true" class="svg-icon" :width="size" :height="size">
    <use :xlink:href="symbolId" :fill="color" />
  </svg>
</template>

<script setup>
const props = defineProps({
  prefix: {
    type: String,
    default: "icon",
  },
  name: {
    type: String,
    required: true,
  },
  color: {
    type: String,
  },
  size: {
    type: String,
    default: "1em",
  },
});

const symbolId = computed(() => `#${props.prefix}-${props.name}`);
</script>

<style scoped>
.svg-icon {
  display: inline-block;
  outline: none;
  width: 1em;
  height: 1em;
  vertical-align: -0.15em; /* 因icon大小被设置为和字体大小一致，而span等标签的下边缘会和字体的基线对齐，故需设置一个往下的偏移比例，来纠正视觉上的未对齐效果 */
  fill: currentColor; /* 定义元素的颜色，currentColor是一个变量，这个变量的值就表示当前元素的color值，如果当前元素未设置color值，则从父元素继承 */
  overflow: hidden;
}
</style>

plugins\svgicon.ts

import SvgIcon from "@/components/SvgIcon/index.vue";
import "virtual:svg-icons-register";

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.component("svg-icon", SvgIcon);
});

nuxt.config.ts

  vite: {
    plugins: [
      createSvgIconsPlugin({
        // 指定需要包含 SVG 文件的目录
        iconDirs: [path.resolve(process.cwd(), "assets/icons/svg")],
        // 指定symbolId格式
        symbolId: "icon-[dir]-[name]",
      }),
      requireTransform({
        fileRegex: /\.js$|\.vue$/, // 匹配需要处理的文件类型
      }),
    ],
  },

结果会闪烁

Answer 1

让阿豪来帮你解答，本回答参考chatgpt3.5编写提供，如果还有疑问可以评论或留言

### 问题描述 在使用 Nuxt.js 的 SVG 组件 `` 时，刷新页面时会导致图标闪烁的问题。这个问题通常是由于 SVG 图标的加载方式或页面重新渲染的机制引起的。 ### 问题分析 1. **SVG 图标的加载时机**：SVG 图标在页面刷新时需要从服务器上重新请求。若请求尚未完成，SVG 图标无法正常显示，导致闪烁现象。 2. **CSS 样式问题**：图标的样式可能影响显示效果，包括过渡效果和初始状态的设置。 3. **Vue 的渲染机制**：在组件加载时，Vue 会重新渲染 DOM 元素，若图标未加载完成，这会影响图标的显示。 ### 解决方案 解决 SVG 图标闪烁的问题，可以通过以下几种方法进行优化： 1. **攒载 SVG 图标**： 确保 SVG 图标在页面加载时就已经具备，这是确保不会闪烁的有效策略。将 SVG 图标存放在一个静态文件中，并通过 webpack 或 vite 打包。 2. **预加载 SVG 图标**： 在页面加载时，可以通过 JavaScript 预先加载所有需要的 SVG 图标，确保 DOM 渲染前图标已经准备好。 3. **使用保留原状的样式**： 在组件的 CSS 中定义一些过渡效果，避免图标在加载时闪烁。例如，可以设置一个透明度渐变。 ### 代码示例 以下是对上述 SVG 组件的相关代码进行的一些优化： #### SvgIcon.vue ```vue <svg class="svg-icon"><use></use></svg> <script></script> <style> .svg-icon { display: inline-block; outline: none; width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; transition: opacity 0.2s ease-in-out; /* 添加过渡效果 */ opacity: 1; /* 设定初始透明度 */ } </style> ``` #### 预加载 SVG 图标 在 `nuxt.config.ts` 中，确保图标被提前引入和处理： ```javascript import { createSvgIconsPlugin } from "vite-plugin-svg-icons"; // Import SVG plugin import path from "path"; // File path module export default { vite: { plugins: [ createSvgIconsPlugin({ // 指定需要包含 SVG 文件的目录 iconDirs: [path.resolve(process.cwd(), "assets/icons/svg")], // 指定 symbolId 格式 symbolId: "icon-[dir]-[name]", }), ], }, }; ``` ### 结论 通过这些方法可以有效地避免 Nuxt.js 中 SVG 组件刷新页面时的闪烁现象。推荐在项目中实现 SVG 图标的预加载和优化 CSS 样式。