VUE 용 글꼴 모양의 SVG 아이콘 시스템

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!