WEB PIXY

タグ: SVG

  • 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

    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 './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

    この ?react は、ViteがSVGR（SVGをReactコンポーネントとしてインポートするためのツール）を使用していることを認識するためのクエリパラメータです。

    ?react を付けることで、SVGのコードに直接CSSを適用したり、内部のパスを変更したりといった、コンポーネントならではの操作が可能になります。

    d-m-81/react-svg-svgr-playground
    No description provided.
    JavaScript ⭐ 0 ⑂ 0 d-m-81d-m-81