ReactでSVGアイコンを使用する方法Reactアイコンと素晴らしいフォント

アイコンは、言葉を使わずに概念や意味を視覚的に伝える方法です。これは、分類、アクション、または警告の場合もあります。

SVGを使用してアイコンをReactアプリに追加して、視覚的なコミュニケーションを改善するにはどうすればよいですか?

  • SVGとは何ですか?
  • SVGがWebに最適な理由は何ですか?
  • パート0:Reactアプリの作成
  • パート1:react-iconsを使用したSVGアイコンの追加
  • パート2:SVGファイルをReactコンポーネントに手動で追加する

SVGとは何ですか?

SVGはScalableVectorGraphicsの略です。これは、XMLに似たマークアップ言語に基づくファイル形式であり、開発者と設計者がパス定義を使用してベクターベースの画像を作成できるようにします。

SVGがWebに最適な理由は何ですか?

SVGはウェブのために生まれました。これは、Webに画像を追加するためのより良い方法を提供するためにW3Cによって作成されたオープンスタンダードです。コンピューターでSVGファイルを開くと、それがすべてコードであることに驚かれるかもしれません。

これは、ファイルサイズが小さい場合に影響します。通常、SVGを使用する場合、同じ高解像度を提供するために必要となる可能性のある大きな画像ファイルと比較して、その小さなサイズを利用できます。

さらに、SVGをパスとして定義しているため、SVGは必要に応じて大きくまたは小さくスケーリングできます。これにより、特にエクスペリエンスをレスポンシブにする場合に、Webでの使用に非常に柔軟に対応できます。

何を作成しますか?

まず、react-iconsというパッケージを使用して説明します。これにより、FontAwesomeなどの人気のあるアイコンセットからアプリにアイコンを簡単にインポートできます。

また、SVGファイルのコードを新しいコンポーネントに直接コピーすることで、SVGファイルをアプリに手動で追加する方法についても見ていきます。

パート0:Reactアプリの作成

このウォークスルーでは、Create React AppまたはNext.jsのいずれであっても、任意のReactフレームワークを使用できます。既存のプロジェクトを使用することもできます。

アイコンを追加するのに特別なものは必要ないので、create-react-appを使用します。

create-react-appの使用を開始するには、ターミナルで次のコマンドを使用して新しいプロジェクトを作成できます。

yarn create react-app [project-name] # or npx create-react-app [project-name] 

注:[project-name]プロジェクトに使用する名前に置き換えてください。を使用しますmy-svg-icons

新しいアプリまたは既存のアプリを入手したら、準備が整います。

パート1:react-iconsを使用したSVGアイコンの追加

プロジェクトにreact-iconsを追加する

react-iconsの使用を開始するには、プロジェクトにインストールします。

プロジェクト内で、次のコマンドを実行します。

yarn add react-icons # or npm install react-icons --save 

完了すると、プロジェクトで使用できるようになります。

プロジェクトのアイコンを選択する

react-iconsの優れた点の1つは、単一のパッケージ内で利用できるようにする豊富なライブラリです。

Font Awesomeをすぐに利用できるだけでなく、GitHubのオクティコン、ヒロアイコン、マテリアルデザインアイコンなど、さまざまなものがあります。

アイコンを選択するときは、いつでも好きなアイコンを使用することができます。そうは言っても、アイコンのルックアンドフィールを一貫させるようにすることをお勧めします。

Webサイトで主にFontAwesomeを使用している場合、フラットカラーアイコンをミックスに追加し始めると、少し奇妙で一貫性がなくなる可能性があります。あなたは最終的に、あなたが作成したパターンを人々が簡単に識別できるような体験を提供したいと考えています。

プロジェクトでreact-iconsを使用する

使用するアイコンが見つかったら、プロジェクトに追加できます。

react-iconsのWebサイトでは、プロジェクトへのインポートに使用するアイコンの名前を簡単に検索できます。

Font Awesomeロケットアイコンを使用したい場合は、サイドバーのFont Awesomeに移動し、ページで「ロケット」(CMD + FまたはCTRL + F)を検索してから、アイコンをクリックして名前をコピーします。クリップボード。

ページの左上にある検索フォームで「ロケット」を検索することもできます。これにより、すべてのアイコンセット全体で「ロケット」の結果が表示されます。

プロジェクト内で、そのアイコンをインポートできるようになりました。react-iconsページの上部にある手順と同様に、react-iconsのreact-icons/faFontAwesomeモジュールを参照する特定のアイコンをからインポートします。

アイコンをインポートするファイルの先頭に以下を追加します。新しいcreate-react-appプロジェクトを使用している場合は、の先頭に追加できますsrc/App.js

import { FaRocket } from 'react-icons/fa'; 

これをテストするために、Reactロゴをアイコンに置き換えましょう。

を削除します component and instead add:

And if we reload the page, we can see our rocket!

Original text


Our rocket isn’t spinning like the React logo though, so let’s fix that.

Add the class .App-logo to the FaRocket component:

And the rocket should now be spinning!

But it’s also a little small. If we look inside of src/App.css, we’re setting the height of .App-logo to 40vmin. While that’s working, for our icon to fill the space, we need to also provide a width for it to fill.

Add the following to the .App-logo class to add a width:

width: 40vmin; 

And while it’s probably a little too big now, we’re at a more appropriate size and we have our icon!

Follow along with the commit.

Part 2: Manually adding SVG files to a React component

Sometimes you don’t want to add a new library just to get an icon. Sometimes it’s a custom icon that’s not available in a public library.

Luckily with React, we can create a new SVG component pretty easily that allows us to add our custom SVG icons anywhere we want.

First, let’s find an icon.

While all Heroicons are available inside react-icons, let’s use it as an example since it’s easy to find and copy some SVG code.

Go to heroicons.com and search for an icon that you’d like to use for this example. I’m going to use “globe”.

After finding the icon you want, hover over that icon, where you’ll see options to copy that icon as SVG or JSX, and copy it as JSX.

With that icon copied, create a new file under src called Globe.js.

Inside of that file, we’re going to create a new component called Globe and paste in our SVG within that component.

import React from 'react'; const Globe = () => { return (    ) } export default Globe; 

Note: when copying normal SVG to a React component, it might not work "as is". Sometimes SVG files include CSS classes or element attributes that aren't valid with JSX.

If you run into errors, try fixing the attributes and looking at the web console to see the warnings and errors React throws. Because we copied as JSX, we were able to make it work right away.

Now, go back to src/App.js and import our new component:

import Globe from './Globe'; 

Then we can replace our rocket icon with our new component:

And if we open up our browser, we can see our globe!

Though, it’s a little big.

We want to apply our .App-logo class to our Globe component, so we need to update that component to take a className prop.

Back at src/Globe.js, add a className prop argument:

const Globe = ({ className }) => { 

Then, add a new prop with that className to the component:

Now, we can update our Globe component in src/App.js to include that class:

And if we reload the page, we can see our logo is back at the right size and it’s spinning again!

Follow along with the commit.

Why don’t we include it as an img file?

While we can include it as an image file just like React does in the default create-react-app code, we get a few benefits from adding our SVG files “inline”.

For one, when adding SVG inline, we can access the different paths with CSS properties. This gives us more flexibility for customizing it dynamically.

It’s also going to provide fewer HTTP requests. The browser will know how to load that SVG, so we don’t need to bother the browser to request that file to include in the page.

That said, it’s still a valid option for adding an SVG file to the page.

Follow me for more Javascript, UX, and other interesting things!

  • ? Follow Me On Twitter
  • ? Subscribe To My Youtube
  • ✉️ Sign Up For My Newsletter
  • ? Sponsor Me