Vue.jsでのSVGアイコンの使用

投稿日: 2022-04-20 2022-10-07
タグ: Vue.js

フォントベースのアイコンが1、2年前に世界を支配していましたが、それ以来、埋め込まれたSVGアイコンが、アプリにアイコンを含めるための最良の方法として登場しました（この投稿にクレジットされることがよくあります）。残念ながら、それらを手動で追加するには、多くの作業と重複した作業が必要です。ありがたいことに、 vue-svgicon はこれを単純化することを目的としており、すばらしい仕事をしています。

始めましょう。

インストールとセットアップ

vue-svgicon は、期待どおりにYarnまたはNPMを介してインストールできます。

# Yarn
$ yarn add vue-svgicon -D

# NPM
$ npm install vue-svgicon --save-dev

次に、グリフごとに個別のSVGアイコンを含むお好みのアイコンフォントをダウンロードします。マテリアルデザインアイコンセットを使用します。これは、Googleのデザインガイドラインに基づいていますが、主にコミュニティから提供された、約2,000個の個別のグリフで利用できる最大のセットの1つです。

これらの.svgファイルをプロジェクトのルートにあるsvg-iconsフォルダーに貼り付けます。（ src ディレクトリの外。）

ここで、 vue-svgicon は、すべてのsvgアイコンファイルを個別にロードできる .js ファイルに変換する必要があるため、簡単なNPMスクリプトをに追加しましょう。私たちのためにこれをしてください。 package.json ファイルを編集して、以下のスクリプトを含めます。

package.json

{
  ...
  "scripts": {
    ...
    "generate-icons": "vsvg -s ./svg-icons -t ./src/compiled-icons"
  }
  ...
}

次に、コマンド npm rungenerate-iconsを発行します。これにより、コンパイルされたアイコンが次の場所に出力されます。 src/compiled-icons/[icon-name].js.

使用法

次に、アプリにアイコンをロードする必要があります。 vue-svgiconプラグインをメインのVueアプリファイルに追加します。

src / main.js

...
import VueSVGIcon from 'vue-svgicon'

Vue.use(VueSVGIcon)

...

これで、を使用してコンポーネントにアイコンをロードできます。 <svgicon> 要素と使用しているアイコンをインポートします。すばらしいボーナスとして、このように SVGアイコンを使用することで、ほとんど手間をかけずに、アプリに必要なアイコンのみを読み込むことができます。

src / ExampleComponent.vue

<template>
  <div>
    <span>Icon Demonstration:</span>
    <!-- You can tweak the width, height, and color of the icon. -->
    <svgicon icon="menu" width="22" height="18" color="#0f2"></svgicon>
  </div>
</template>

<script>
// If you really, really need to, you can import the whole iconset in your main.js file with `import ./compiled-icons`.
import './compiled-icons/menu';
</script>

vue-svgicon には、他にもいくつかの巧妙なトリックがあります。詳細については、公式リポジトリを参照してください。

getdocs

13036