NextでのSVGの処理

に入る

プロジェクトはsvg本プロジェクト開始前にテスト兼簡易プロジェクト!
作りが難しすぎるのが心配ですこの程度なら….うまく書けないでしょう?!ほほほ

🤔 SVGとは?

SVGランScalable Vector Graphicsの略で、各位置値のベクトルなどを表す2次元グラフィック用XMLベース形式です.

・XML(Extensible Markup Language)W 3 Cが開発したもので、他の特殊目的を持つ表記言語を作成するためのマルチターゲット表記言語を推奨します.Webページでデータのラベル記述のドキュメントを交換(通信)します.

SVG所詮xmlの表記言語の種類は、cssおよびjavascriptに変更可能です.
実は、初めてsvgということで、デザイナーさんと協力してsvgというイメージに触れました.😀

なぜSVGを使うのですか?

PNG私JPGビットマップベースの画像で、各項目に1つ以上の情報ビットがあることを示しています.SVGベクトルを元に各座標に点を付けた概念です.ベクトルベースのアイコンは、拡大または縮小してもアクティブになりません.
うろこ写真を拡大すると画像が割れ、イラストはベクトルベースで割れていないのを覚えています.なぜsvgを使うのか理解します!
加えて容量が小さく、出力が速く、修正やアニメーションができる点で、多くのデザイナーが納得できるsvg!

コードを見てみましょう!

例として、このようなコードである拡大鏡の無料svgをダウンロードしました.

<?xml version="1.0" ?>
<svg id="Icons" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<defs>
  <style>.cls-1{fill:#232323;}</style>
</defs>
<path class="cls-1" d="M18.856,14.624a10.022,10.022,0,1,0-4.234,4.234l4.254,4.255a2.994,2.994,0,1,0,4.239-4.23ZM2,10a8,8,0,1,1,8,8A8.009,8.009,0,0,1,2,10ZM21.7,21.708a1,1,0,0,1-1.4,0l-3.967-3.968a10.092,10.092,0,0,0,1.4-1.406L21.705,20.3a.976.976,0,0,1-.009,1.407Z"/>
<path class="cls-1" d="M10,4a6.006,6.006,0,0,0-6,6,1,1,0,0,0,2,0,4,4,0,0,1,4-4,1,1,0,0,0,0-2Z"/>
</svg>

⚄▼nextは、reactで使用するようにsvgを読み取ると、svgを読み取ることができないことを誤って指摘している.

@svgr/webpackのインストール

エラーが発生したため、設置すべき@svgr/webpack

yarn add -D @svgr/webpack

next.config.変更

改訂next.config.js

module.exports = withTM({
  reactStrictMode: true,
  webpack: config => {
    config.module.rules.push({
      test: /\.svg$/i,
      issuer: /\.[jt]sx?$/,
      use: ["@svgr/webpack"]
    });
    return config;
  }
});

svgをRealComponentとして作成します。

propsは色とサイズを受け取りました!

type IconProps = {
	color?: string;
	width?: number;
};

const Search = ({ color, width }: IconProps) => {
	return (
		<>
			<svg
				id="Icons"
				width={`${width}px`}
				viewBox="0 0 24 24"
				xmlns="http://www.w3.org/2000/svg"
			>
				<defs>{<style>.cls-1{fill:#232323;}</style>}</defs>
				<path
					fill={color}
					className="cls-1"
					d="M18.856,14.624a10.022,10.022,0,1,0-4.234,4.234l4.254,4.255a2.994,2.994,0,1,0,4.239-4.23ZM2,10a8,8,0,1,1,8,8A8.009,8.009,0,0,1,2,10ZM21.7,21.708a1,1,0,0,1-1.4,0l-3.967-3.968a10.092,10.092,0,0,0,1.4-1.406L21.705,20.3a.976.976,0,0,1-.009,1.407Z"
				/>
				<path
					fill={color}
					className="cls-1"
					d="M10,4a6.006,6.006,0,0,0-6,6,1,1,0,0,0,2,0,4,4,0,0,1,4-4,1,1,0,0,0,0-2Z"
				/>
			</svg>
		</>
	);
};

export default Search;

svgを使いましょう!

import Search from '@icon/Search';

export default function SearchInput({
	name,
	placeholder,
	onChange,
}: TSearchInput) {
	return (
		<Inner>
			<Input
				type="text"
				placeholder={placeholder}
				name={name}
				onChange={onChange}
			/>
			<Search width={20} color="#00C092" />
		</Inner>
	);
}

🎁 結果

大満足!😆😆😆
今はプロジェクトでいろいろな製品を使います!