ホームページ > 記事 > ウェブフロントエンド > React および Vue プロジェクトで SVG を使用する方法

React および Vue プロジェクトで SVG を使用する方法

亚连オリジナル: 2018-06-06 15:24:092092ブラウズ

この記事では主に React および Vue プロジェクトで SVG を使用する方法を紹介し、参考として提供します。

一部の最新のフラットデザイン Web サイト、特にモバイル Web サイトには、Web サイトのアイコン、ユーザーのデフォルトのアバター、モバイルホームページの下部にある固定切り替えバーなど、多くのシンプルで明確な小さなアイコンが含まれていることがよくあります。これらの小さなアイコンアイコンは通常、アーティストによって作成され、スプライトチャートに配置され、トリミングされてフロントエンドに表示されます。

実際、アーティストがこれらのシンプルな小さなアイコンを作成する必要はありません。フロントエンドは svg を使用してコードを使用してこれらのシンプルなアイコンを描画できます。これらのアイコンはコードで記述されているため、変更したい場合は、アイコンの色、アイコンの形状、サイズなどを変更するには、数行のコードを変更するだけで済み、非常に簡単で、アートをやり直す必要はありません。

この記事では svg を使用して絵を描く方法については説明しません。svg について知らない場合は、ここで参照してください。この記事では主に Web サイトでの svg の使用方法について説明します。

一般的な Web ページでの SVG の使用

svg は、XML 形式を使用して画像を定義します。これは、Web ページに埋め込まれて特定の効果を提供するための一般的な HTML タグと考えることもできます。 Web ページで svg を使用する例は次のとおりです:

<body>
  <svg width="100" height="100" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <rect width="100%" height="100%" style="fill:pink;stroke-width:1;stroke:rgb(0,0,0)"/>
  </svg></body>

効果は次のとおりです:

ご覧のとおり、svg アイコンを描画できる限り、通常の Web ページで svg を使用するのは非常に簡単です。 Web ページ上でレンダリングすることはまったく問題ありません。

Vue で Svg を使用する

通常の Web ページで svg を使用するのと同じように Vue で使用できます。ただし、コンポーネント開発プロジェクトに vue を選択したため、多数のコンポーネントの中で、結局のところ、長いSVGは少し見苦しいです。

1 つの解決策は、svg の use タグを使用することです。メインページに svg アイコンを描画するコードを直接記述する代わりに、このコードの大きなセクションを別のファイルに配置し、 use を使用してこのコードを参照します。アイコンだけで十分です（Ele.meのモバイル端末ではこれが行われるようです）。

たとえば、svg を描画するためのすべてのコードを svg-icon.vue ファイルに配置します。シンボルタグを使用してすべてのアイコンの描画コードを分離し、混乱を避けるために個別に名前を付けます。次に、このファイルをコンポーネントとしてエクスポートして表示します。このコンポーネントをホームページに導入し、svg アイコンを使用する必要がある use タグを通じて導入します。

svg-draw.vue のコード例は次のとおりです:

<template>
 <svg
  xmlns="http://www.w3.org/2000/svg"
  xmlnsXlink="http://www.w3.org/1999/xlink"
  style={{position:&#39;absolute&#39;,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>

この SVG コンポーネントには、スプライトチャートに似た多くの小さなアイコンが含まれており、便宜上、個別に名前が付けられています。。

使用例は次のとおりです:

// index.vue
...<svg class="location-icon">
 <use xlink:href="#location" rel="external nofollow" ></use></svg>...

すると、対応する svg アイコンが Web ページに正常に表示されることがわかります:

ただし、現在の Web サイトで大量のデータを使用する必要がある場合は、まだ問題があります。 svg アイコンを使用すると、必然的に svg-icon.vue のファイルサイズが増加します。その結果、Web ページに名前を付けるのに必要な svg アイコンは 1 つだけになります。その結果、数百の svg コードをすべて読み込むことになります。これは明らかにあまりフレンドリーではありません。オンデマンド読み込みとは、表示されるかどうかに関係なく、表示されるべきときに読み込まれるアイコンを意味します。表示される機会がないため、ロードされることはありません。

Github にはそのようなプラグインがたくさんありますが、とても便利だと思うプラグインを紹介します。vue-svg-icon は使いやすく、すぐに始めることができます。

まず、このプラグインをインストールします。インストールが完了したら、このプラグインをプロジェクトのエントリファイルに登録して、グローバル呼び出しを容易にします:

import Icon from &#39;vue-svg-icon/Icon.vue&#39;Vue.component(&#39;icon&#39;, Icon)

次に、新しい svg ディレクトリを作成します。ルートディレクトリの /src ディレクトリ (現在、このパスはこのようなパスのみであり、他のパスやディレクトリとして設定することはできません) を作成し、このディレクトリに使用したい svg アイコンの svg ファイルを置きます。

例えば、WeChat アイコンの svg は次のとおりです。

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg t="1502683891821" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2885" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16">
<defs>
<style type="text/css"></style>
</defs>
<path d="M282.6 363.8c-23.7 0-47-15.7-47-38.9 0-23.7 23.3-38.9 46.5-38.9 23.7 0 38.9 15.2 38.9 38.9 0.5 23.2-15.1 38.9-38.4 38.9zM500.4 286c23.7 0 38.9 15.2 38.9 38.9 0 23.3-15.2 38.9-38.9 38.9-23.3 0-47-15.7-47-38.9 0-23.7 23.7-38.9 47-38.9z m167.7 84.5c9.8 0 19.7 0.5 30 1.8-27.3-125.6-161.4-218.7-314.4-218.7C212.4 153.6 72 270.3 72 418.3c0 85.9 46.5 155.6 124.8 210.2l-31.3 93.9 109.1-54.6c38.9 7.6 70.2 15.7 109.1 15.7 9.4 0 19.2-0.5 29.1-1.3-6.3-20.6-9.8-42.9-9.8-65.3-0.1-136 116.6-246.4 265.1-246.4z" p-id="2886"></path><path d="M772.7 573.9c-15.2 0-30.9-15.2-30.9-30.9 0.5-15.7 15.7-31.3 30.9-31.3 23.7 0 39.4 15.7 39.4 31.3-0.1 15.7-15.7 30.9-39.4 30.9z m-171.3 0c-15.2 0-30.9-15.2-30.9-30.9s15.7-31.3 30.9-31.3c23.7 0 38.9 15.7 38.9 31.3 0.5 15.7-15.2 30.9-38.9 30.9zM952 613.3C952 488.5 827.2 387 687.3 387c-148 0-264.7 101.5-264.7 226.3 0 124.8 116.7 225.8 264.7 225.8 31.3 0 62.6-8.1 93.5-15.7l85.9 47-23.7-77.8c62.5-47 109-109.1 109-179.3z" p-id="2887">
</path>
</svg>

上記のコードを wx.svg などの .svg ファイルに保存し、/src/svg ディレクトリに配置します。これで準備作業は完了です。。

次に、これを使用したい場合は、これを vue コンポーネントに直接記述するだけです:

<template>
  <icon class="wx-icon" name="wx"></icon></template>

ページを更新すると、wx.svg ファイルが表示されることがわかります。このようにして、svgファイルのオンデマンド導入を実装しました。

React での Svg の使用

React での Svg の使用は、vue と同じ 3 つの解決策があります。1 つは、react のリーダーメソッドに直接 svg コードを記述する方法で、もう 1 つは、すべての svg Put を描画する方法です。コードをファイルに読み込み、そのファイルを一度ロードし、use タグを使用して対応する svg パターンを参照します。3 番目の方法は、プラグインを使用してオンデマンドで導入することです。

第一种直接在渲染方法中写入 svg的方法就不多说了，第二种也很简单，和 vue一样，只不过写法上需要注意一下。

render() {
  return (
   <svg
    xmlns="http://www.w3.org/2000/svg"
    xmlnsXlink="http://www.w3.org/1999/xlink"
    style={{position:&#39;absolute&#39;,width:0,height:0}}>
    <defs>
     <symbol viewBox="0 0 26 31" id="location">
      <path fill="#FFF" fillRule="evenodd" d="M22.116 22.601c-2.329 2.804-7.669 7.827-7.669 7.827-.799.762-2.094.763-2.897-.008 0 0-5.26-4.97-7.643-7.796C1.524 19.8 0 16.89 0 13.194 0 5.908 5.82 0 13 0s13 5.907 13 13.195c0 3.682-1.554 6.602-3.884 9.406zM18 13a5 5 0 1 0-10 0 5 5 0 0 0 10 0z"></path>
     </symbol>
     <symbol viewBox="0 0 14 8" id="arrow">
      <path fill="#FFF" fillRule="evenodd" d="M5.588 6.588c.78.78 2.04.784 2.824 0l5.176-5.176c.78-.78.517-1.412-.582-1.412H.994C-.107 0-.372.628.412 1.412l5.176 5.176z"></path>
     </symbol>
    </svg>
   )
}

主要是需要注意，因为 react使用 jsx语法，不允许出现 - 连字符，所以像 fill-rule这样的属性，就必须写成 fillRule，引用的时候同样如此。

// 引用的时候需要将 `xlink:href` 改写成 xlinkHref<svg className="arrow-left">
  <use xlinkhref="#arrow-left" rel="external nofollow" ></use>
 </svg>

第三种按需引入，只加载当前需要的 svg形状，同样是将每一个 svg图片作为一个单独的文件保存，然后再需要使用的地方进行引用。 Github上有个项目 react-svg，这个项目内部其实是对 SVGInjector的包装，

安装 react-svg之后，就可以像下面这样使用了：

import ReactSVG from &#39;react-svg&#39;

ReactDOM.render(
 <ReactSVG
  path="atomic.svg"
  callback={svg => console.log(svg)}
  className="example"
 />,
 document.querySelector(&#39;.Root&#39;)
)

一般都只是在使用小图标的时候才考虑 svg，而这些小图标一般都比较简约，绘制起来也没什么难度，不过大部分情况下没有必要自己来画，很多网站都提供svg的图标下载，例如阿里的 iconfont，图标数量众多，基本可以满足绝大部分的需求，另外，类似的网站还有 easyicon 、 icomoon等。

上面是我整理给大家的，希望今后会对大家有帮助。

有关在Vue中使用Compass的具体方法？

如何关闭Vue计算属性自带的缓存功能，具体步骤有哪些？

如何解决vue 更改计算属性后select选中值不更改的问题，具体操作如下

以上がReact および Vue プロジェクトで SVG を使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：vue-cli3.0 にはどのような新しい特殊効果が追加されましたか?次の記事：vue-cli3.0 にはどのような新しい特殊効果が追加されましたか?

続きを見る