vue.js?? ???? ???? ?? ???? ? ????. ??? ??? ????? ??? ?? ???? ???? ?? ???? ?? ?? ??? ??? ? ? ????. SVG? ??? ???? ????? ?? ???? ???? ???? ??? ??? ?????.

? ??? ???? ?? ??? ??? ? vue.js ?? ??????? ???? SVG ??? ???? ?????.

• ??? ??/?? : ??? ???? SVG? ????? ???? ??????.
• ??? : ??? ???? ????? ???? ?????<svg-icon icon="rocket"></svg-icon> .
• ???? : CSS font-size ? color ??? ???? ??? ? ?? ???, ??? ?? ??? ?????.
• ??? : ??? ???? ?? ????? ?? SVG ?? ??? ????.
• ? ? ?? : ? ? ?? ??? ???? ????.

? ???? ? ?? ?? ?? ?? VUE ?? ??? ???? ???? ??? ??????.

• Webpack : Vue Cli? ???? ?? ??????.
• svg-inline-loader : npm install svg-inline-loader --save-dev . ? ??? SVG ??? ???? ??? ?????.

SVG ????? ?? ?? ( SvgSprite.vue )

SVG ?? ??? ???? ?? ?? ?? SVG ???? ?? ? ??? SVG ? SVG ?????? ????. ????<use></use> ??? ID? ???? ?? :<svg><use xlink:href="#rocket"></use></svg> . SvgSprite ?? ??? ??? ?????.

<template>
  <svg height="0" style="display: none;" v-html="$options.svgSprite" width="0"></svg>
</template>

<script>
const svgContext = require.context(
  '!svg-inline-loader?'  
  'removeTags=true'   // Remove title tags, etc.
  '&removeSVGTagAttrs=true'   // Remove attributes
  '&removingTagAttrs=fill'   // Remove fill attributes
  '!@/assets/icons', // Icon directory
  true, // Search subdirectories
  /\w \.svg$/i // Only include SVG files
);

const symbols = svgContext.keys().map(path => {
  const id = path.replace(/^\.\/(.*)\.\w $/, '$1'); // Extract ID from filename
  const content = svgContext(path); // Get SVG content
  return content.replace('<svg', `<symbol id="${id}"`).replace('svg>', 'symbol>'); // Convert to symbol
});

export default {
  name: 'SvgSprite',
  svgSprite: symbols.join('\n'), // Concatenate symbols
};
</script>

????? ??? ?? ?????<svg></svg> ???? $options.svgSprite ? ?? ???? ???? ?? .svgsprite. ????? svg-inline-loader ???? require.context ???? SVG? ???? ???? ??? ??? ?????. ?? ?? ? SVG? a? ?????<symbol></symbol> ?? ? ID ?? ??.

? ?? ??? App.vue ??? ??? ??????.

??? ?? ?? ( SvgIcon.vue )

SvgIcon ?? ??? ? ?????<use></use> ??????? ???? ???? ?? :

<template>
  <svg class="icon" :class="{ 'icon-spin': spin }">
    <use :xlink:href="`#${icon}`"></use>
  </svg>
</template>

<script>
export default {
  name: 'SvgIcon',
  props: {
    icon: { type: String, required: true },
    spin: { type: Boolean, default: false },
  },
};
</script>

<style scoped>
svg.icon {
  fill: currentColor;
  height: 1em;
  margin-bottom: 0.125em;
  vertical-align: middle;
  width: 1em;
}
svg.icon-spin {
  animation: icon-spin 2s infinite linear;
}
@keyframes icon-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(359deg); }
}
</style>

CSS? ??? ???? ??? ???? ???? ?? ??? ?? ??? ???????. spin ??? ?????? ?????.

? ?? ??? main.js ? ??????.

 'vue'?? Vue ?? ??
'@/components/svgicon.vue'?? svgicon ?? ??
vue.component ( 'svg-icon', svgicon)

? ???? vue.js ?? ?????? SVG ???? ?????? ???? ????? ?? ?? ?? ??? ???? ?????. ?? ???? ? ?? ??? ?? ? ? ?? ??? ??/?? ?? ???? ??? ? ????.

? ??? VUE ? ?? ??? SVG ??? ???? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!