Vue プロジェクトでアイコンをエレガントに使用する方法

Vue プロジェクトでアイコンを使用する方法を理解する前に、アイコンの最も基本的な知識ポイントであるスプライト技術を理解する必要があります。

スプライト技術

現在、SVG スプライトのベストプラクティスは、シンボル要素を使用することです。シンボル要素とは？簡単に訳すと「シンボル」という意味です。しかし、この解釈は、ここのシーンには合いません。Flash を使用したことがあるかどうかわかりませんが、シンボルは実際には Flash の「ムービークリップ」または「コンポーネント」に似ています。したがって、シンボルは「コンポーネント」として解釈するのが最も適切だと個人的には思います! では、シンボルと SVG スプライトの関係はどのようなものでしょうか? SVG 要素をステージ、シンボルをステージ上で 1 つ 1 つ組み立てられたコンポーネントと見なすことができ、これらの 1 つ 1 つのコンポーネントが、1 つ 1 つ使用する SVG アイコンです。
したがって、3 つの SVG アイコンを組み合わせた SVG 要素のコード構造は次のようになります。

<svg>
    <symbol>
        <!-- 第1个图标路径形状之类代码 -->
    </symbol>
    <symbol>
        <!-- 第2个图标路径形状之类代码 -->
    </symbol>
    <symbol>
        <!-- 第3个图标路径形状之类代码 -->
    </symbol>
</svg>

各シンボルはアイコン要素ですが、上記のコードだけでは何もレンダリングできません。
シンボル要素自体はレンダリングされないため、シンボル要素のインスタンス (シンボルへの参照) のみがレンダリングされます。要素) をレンダリングします。

シンボルは衣服のようなもので、誰も着ていません上半身の効果はどうなるかわかりません。

use 要素は、SVG、特に Web 開発において非常に強力で重要な要素です。

繰り返し呼び出すことができます。
SVG を介して呼び出します。

1. 繰り返し呼び出せる

開発中、最終的に座標値をたくさん使ってグラフを描いていましたが、同じグラフをもう一度作ったらどうしますか？コードをもう一度コピーしますか？プログラミングを学ぶ人なら誰でも真実を知っています。繰り返し呼び出されるものをカプセル化する必要がありますが、SVG ではカプセル化する必要はなく、直接繰り返すだけです。ただ行う：

<svg>
  <symbol>
    <g id="shape">
        <rect x="0" y="0" width="50" height="50" />
        <circle cx="0" cy="0" r="50" />
    </g>javascript:;
  </symbol>

  <use xlink:href="#shape" x="50" y="50" />
  <use xlink:href="#shape" x="200" y="50" />
</svg>

同じ記号ですが、呼び出し時の x 軸の距離がわずかに異なります。直接使用できます。調整するだけです。
まず、 xlink:href 属性を介して使用する要素を見つけるための use 要素がないことに注意してください。#shape は、id が shape である要素に対応します。use 要素は独自の座標を持つことができ、変換変換をサポートし、他の use 要素を使用することさえできます。
ここで、２つの使用要素は、同じシンボル要素（組み合わせ）を使用することにより、図形の繰り返し呼び出し機能を実現する。
2. SVG 間の呼び出し SVG の
use 要素は、1 つのドキュメント (HTML) 内にある限り、他の SVG ファイルの要素を呼び出すことができます。
上記の例で id が shape である要素が、次の例と同じ HTML にあると仮定すると、同様に使用できます。

<svg width="500" height="110">
    <use xlink:href="#shape" x="50" y="50" />
</svg>

そして、このクロス SVG 呼び出しが「SVG スプライト技術」の中核です。
ページのどこかに Sprite(symbol) でいっぱいの SVG ファイルをロードする (または直接 SVG コードを含める) だけでよいので、ページのどの隅でも、このアイコンを使用したい限り、シンプルなコード、アイコンサイズの CSS コントロールが必要で、xlink:href 属性のみを持つ use 要素が 1 つだけあります。つまり、HTML レベルでは、アイコンのコードコストは従来の CSS スプライトや一般的なフォントフェイスとほぼ同じであり、コードは簡潔で保守が容易です。すべての SVG アイコンは 1 つの SVG ソースにあります。サイズは任意に引き伸ばすことができ、色を制御することもでき、まさに未来の Web アイコンのスターです。

Vue プロジェクトで Sprite テクノロジを使用する方法

アピールスプライト技術の基本原理を理解しており、iconfont.js (生成されたすべてのシンボル、js で生成された svg コードを含む) をインポートするだけで、すぐに使用できます。しかし、直感的ではないという欠点があります. 結局、コードから導入したアイコンが何であるかを直接見ることはできません. また、必要なアイコンがどのアイコン名に対応するかを知ることもできません. 使用するたびに.また、アイコンを追加、削除、または変更するときは、元の iconfont.js を置き換える新しい js を生成する必要があります。

したがって、Vue プロジェクトでは、webpack ローダーである svg-sprite-loader を使用できます. 実際、webpack でコンパイルされたすべてのプロジェクトでこのプラグインを使用できます. 複数の SVG 画像を svg-sprite にパッケージ化できます.

まず、Vue プロジェクトにインストールします。

npm install svg-sprite-loader -D 或 yarn add svg-sprite-loader -D

次に、フォルダーを作成します
。src/svg など、主に使用する svg 画像ファイルを格納するために、src ディレクトリの下にフォルダーを作成します。

webpackConfig の構成:
svg-sprite-loader がインストールされたので、それを使用するように webpack を構成する必要があります。

1. Vue CLI3.0 以降では、主に webpack 構成に vue.config.js を使用します。

module.exports = {
  chainWebpack: config => {
    // 清空默认svg规则
    config.module
      .rule('svg')
      .uses.clear()
    config.module //针对svg文件添加svg-sprite-loader规则
      .rule('svg1')
      .test(/\.svg$/)
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
      .end()
  }
}

また

module.exports = {
  chainWebpack: config => {
    // svg rule loader
    const svgRule = config.module.rule('svg') // 找到svg-loader
    svgRule.uses.clear() // 清除已有的loader, 如果不这样做会添加在此loader之后
    svgRule.exclude.add(/node_modules/) // 正则匹配排除node_modules目录
    svgRule // 添加svg新的loader处理
      .test(/\.svg$/)
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]',
      })
    // 修改images loader 添加svg处理
    const imagesRule = config.module.rule('images')
    imagesRule.exclude.add(resolve('src/assets/icons'))
    config.module
      .rule('images')
      .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)
  }
}

2. ハイパーコンバージドプロジェクトなど、古いスキャフォールディングでビルドされた Vue プロジェクトの場合、src/build/webpack.base.conf.js で構成します。

module: {
    rules: [
      {
        test: /\.svg$/,
        loader: 'svg-sprite-loader',
        include: [resolve('src/svg')],
        options: {
          symbolId: 'icon-[name]'
        }
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        exclude: [resolve('src/svg')], // 去除默认图片处理对指定 svg 的影响
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      }
    ]
  }

自動的にインポート

アピール操作で作成したフォルダに使用するアイコンを配置する際、webpackのrequire.contextを使ってこれらのアイコンファイルをインポートする必要があります。

require.context(ディレクトリ,useSubdirectories,regExp)：

directory: 取得するディレクトリを示します
useSubdirectories: サブディレクトリを取得するかどうか
regExp: ファイルに一致する正規表現

require.context("./test", false, /.test.js$/); このコード行は、
ファイル名が .test.js で終わるすべてのファイルを検索するために、テストフォルダー (サブディレクトリを含まない)に移動します。要求される可能性があります。より率直に言えば、
対応するファイルモジュールを通常のマッチングで紹介できます。

次のコードを main.js に追加します。

const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('./svg', false, /\.svg$/)
requireAll(req)

その後、svg フォルダー内のアイコンを直接追加、削除、および変更することができます. 何があっても、svg シンボルは自動的に生成されます.
この時点で、プロジェクトでアイコンを直接使用できます。

<svg><use xlink:href="#icon-name"/></svg>

しかし、それを標準の Vue コンポーネントにカプセル化することができます:

<template>
  <svg :class="className" aria-hidden="true">
    <use :xlink:href="iconName" />
  </svg>
</template>

<script>
export default {
  name: 'SvgIcon',
  props: {
    iconClass: {
      type: String,
      required: true,
    },
    className: { // 自定义 svg 类名，后期可根据类名修改 svg 样式
      type: String,
      default: '',
    },
  },
  computed: {
    iconName() {
      return `#icon-${this.iconClass}`; // 拼接成设置好的 id 名格式
    }
  },
};
</script>

<style lang="less" scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

このようにして、完了し、Vue プロジェクトで SVG ファイルを好きなように直接使用できます。