Vue.jsでのSVGアイコンの使用
フォントベースのアイコンが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 には、他にもいくつかの巧妙なトリックがあります。詳細については、公式リポジトリを参照してください。