ReactでSVGを扱う

本当にあった怖いSVGアイコンの話
https://zenn.dev/t_keshi/articles/react-neat-icon

SVGRを使ってSVGをReactComponentに変換する方法

SVGRの公式サイトにアクセスすると、初っ端から「React アプリケーションで SVG を利用するための最高のツール」的な説明が書いてあって、我々の求めていたものだ感があります。手軽な SVGR の導入方法は、下記のSVGR praygroundを使って、Web上でReactComponentに変換してしまうことです。

npm install vite-plugin-svgr --save-dev

npm install vite-plugin-svgr --save-dev

viteの設定ファイルに下記項目を追加する。

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
 import svgr from 'vite-plugin-svgr'

// https://vitejs.dev/config/
export default defineConfig({
 plugins: [
   react(),
    svgr()
 ]
})

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
 import svgr from 'vite-plugin-svgr'

// https://vitejs.dev/config/
export default defineConfig({
 plugins: [
   react(),
    svgr()
 ]
})

import './App.css'
import SvgComponent1 from './assets/honey-svgrepo-com.svg?react';

function App() {

  return (
    <>
      <h1>React + SVGR</h1>
      <SvgComponent1 style={{width:'300px', height:'300px'}}/>
    </>
  )
}

export default App

import './App.css'
import SvgComponent1 from './assets/honey-svgrepo-com.svg?react';

function App() {

  return (
    <>
      <h1>React + SVGR</h1>
      <SvgComponent1 style={{width:'300px', height:'300px'}}/>
    </>
  )
}

export default App