VUE用のフォントのようなSVGアイコンシステム

Vue.jsでアイコンの管理は難しい場合があります。アイコンフォントは便利ですが、カスタマイズの柔軟性が不足しており、バージョン制御はバイナリの性質のために悪夢になります。 SVGは優れたソリューションを提供しますが、使いやすさと効率的な管理を維持するには、思慮深いアプローチが必要です。

この記事では、vue.jsアプリケーション用の理想的なSVGアイコンシステムを紹介し、シンプルさと保守性に焦点を当てています。

• アイコンの追加/削除：指定されたフォルダーからSVGを追加または削除するだけです。
• 使用法：簡単な構文を使用して、テンプレートでアイコンを使用します<svg-icon icon="rocket"></svg-icon>。
• スタイリング： CSS font-sizeとcolorプロパティを使用したスケールおよびカラーアイコン、アイコンフォントの動作を模倣します。
• 最適化：同じアイコンの複数のインスタンスのSVGコードの複製を回避します。
• Webpack統合： Webpack構成の変更は必要ありません。

このシステムは、2つの小さな単一ファイル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で動的に生成される要素。スクリプトはsvg-inline-loaderを使用してsvgsを使用して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 中国語 Web サイトの他の関連記事を参照してください。