Vueはvue-svg-inconプラグインを使ってsvgを実現します.必要に応じてロードします.
7308 ワード
一、svgのホームページでの一般的な使い方
svgはXML形式で画像を定義していますが、基本的には以下のように使います.
二、Vueでsvgを使う
上記のような一般的な使い方でVueでsvgを直接使うことができますが、すでにVueを使って開発プロジェクトをコンポーネント化している以上、コンポーネントにsvgを挿しても乱雑になります.
ここでsvgのuseラベルによってsvgの大きなセグメントの描画コードをsmbolにパッケージしてuseで呼び出すことができます.
例えば、svgを描いたコードをsvg-incon.vueファイルに入れ、すべてのアイコンの描画コードはsmbolラベルで区切られて単独で命名され、このファイルをコンポーネントとしてエクスポートし、ホームページにこのコンポーネントを導入し、svgアイコンを使用するところにuseタグを通して導入します.
svg-incon.vueコードの例は以下の通りです.
index.vueで使用する例:
三、vue-sv-inconプラグインにより必要に応じてロードすることを実現する.
1、据え付け
2、プロジェクトのmain.jsの入り口にvue-svg-inconを導入して全体的に呼び出します.
3、svgアイコンファイルをsrc/svg/に入れる
アイコンファイルはiconfontでダウンロードできます.
4、コンポーネントに必要なアイコンをロードする
例えば、pen.svgは/src/svgディレクトリにおいて、vueコンポーネントに必要に応じてロードされます.
svgはXML形式で画像を定義していますが、基本的には以下のように使います.
<body>
<svg width="50" height="50" version="1.1" xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="100%" style="fill:red;stroke-width:1;stroke:rgba(0,0,0,1)"/>
svg>
body>
二、Vueでsvgを使う
上記のような一般的な使い方でVueでsvgを直接使うことができますが、すでにVueを使って開発プロジェクトをコンポーネント化している以上、コンポーネントにsvgを挿しても乱雑になります.
ここでsvgのuseラベルによってsvgの大きなセグメントの描画コードをsmbolにパッケージしてuseで呼び出すことができます.
例えば、svgを描いたコードをsvg-incon.vueファイルに入れ、すべてのアイコンの描画コードはsmbolラベルで区切られて単独で命名され、このファイルをコンポーネントとしてエクスポートし、ホームページにこのコンポーネントを導入し、svgアイコンを使用するところにuseタグを通して導入します.
svg-incon.vueコードの例は以下の通りです.
<template>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
style={{position:'absolute',width:0,height:0}}>
<defs>
<symbol viewBox="0 0 26 31" id="location">
<path xmlns="http://www.w3.org/2000/svg" d="M512.571517 65.907059c-204.736964 0-370.715183 165.979242-370.715183 370.724393 0 94.440929 35.320437 180.625824 93.462648 246.083651 1.572822 2.690272 3.50994 5.225001 5.817496 7.531534l240.297878 251.597225c1.279133 1.864464 2.736321 3.64297 4.393054 5.298679 2.111081 2.111081 4.418636 3.90596 6.856152 5.402033 14.458293 10.06524 34.491559 8.658194 47.393403-4.242627 3.26537-3.263323 5.78782-6.987135 7.582699-10.960633L783.610536 690.24766c1.867534-1.866511 3.489474-3.88447 4.876054-6.010901 58.951647-65.640999 94.819552-152.431691 94.819552-247.604284C883.305119 231.886301 717.325877 65.907059 512.571517 65.907059zM512.390391 588.611865c-82.734306 0-149.814074-67.087954-149.814074-149.842727 0-82.753749 67.079768-149.833517 149.814074-149.833517 82.772168 0 149.851936 67.079768 149.851936 149.833517C662.242328 521.523911 595.161536 588.611865 512.390391 588.611865z" fill="#d81e06"/>
symbol>
defs>
svg>
template>
ここでは、vueコンポーネント全体から大きなsvgを導出し、このsvgには多くの小さなアイコンが含まれており、精霊図のように、各アイコンはsmbolで区切られており、単独で名前を付けて起動しやすい.index.vueで使用する例:
...
<svg class="location-icon">
<use xlink:href="#location">use>
svg>
...
しかし、一つのページが必要なsvgアイコンが多いと、svg-incon.vueというファイルは非常に大きいです.他のページが一つのsvgアイコンを使うだけで、何百のアイコンを含むsvgコンポーネントをロードする必要があります.明らかに友好的ではありません.必要に応じてロードできるようにすると良いです.現在のページではどのアイコンが必要ですか?三、vue-sv-inconプラグインにより必要に応じてロードすることを実現する.
1、据え付け
npm install vue-svg-icon --save-dev
2、プロジェクトのmain.jsの入り口にvue-svg-inconを導入して全体的に呼び出します.
import Icon from 'vue-svg-icon/Icon.vue';
Vue.component('icon', Icon);
3、svgアイコンファイルをsrc/svg/に入れる
アイコンファイルはiconfontでダウンロードできます.
4、コンポーネントに必要なアイコンをロードする
例えば、pen.svgは/src/svgディレクトリにおいて、vueコンポーネントに必要に応じてロードされます.
<template>
<icon name="pen" scale="1">icon>
template>
ここでは、scale属性値を変更したり、使用ページでsvgスタイルを変更したりして、アイコンのサイズを調整できます.