WEB PIXY

ブログ

  • ReactでSVGを扱う（SVGR Playground）

    SVGのコードを用意する

    SVG ファイルをエディターで開きコードを用意する。

    <svg fill="#000000" width="800px" height="800px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1"><path d="M26.01,15.24H6c-.41,0-.75,.34-.75,.75,0,4.24,2.47,7.91,6.05,9.66v2.35c0,.41,.34,.75,.75,.75h7.92c.41,0,.75-.34,.75-.75v-2.35c3.57-1.75,6.04-5.41,6.04-9.65,0-.41-.34-.75-.75-.75Zm-6.79,12.01h-6.42v-.99c1.01,.32,2.09,.49,3.21,.49s2.2-.17,3.22-.49v.99Zm-3.22-2c-4.13,0-7.63-2.72-8.82-6.47h14.69c.41,0,.75-.34,.75-.75s-.34-.75-.75-.75H6.85c-.03-.18-.05-.36-.07-.54H25.23c-.38,4.75-4.37,8.51-9.23,8.51Z"/><path d="M25.55,5.23H14.99v-.13c0-1.02-.83-1.85-1.85-1.85-.41,0-.79,.14-1.1,.37-.31-.23-.69-.37-1.1-.37s-.79,.14-1.1,.37c-.31-.23-.69-.37-1.1-.37s-.79,.14-1.1,.37c-.31-.23-.69-.37-1.1-.37-1.02,0-1.85,.83-1.85,1.85v3.86c0,1.02,.83,1.85,1.85,1.85,.41,0,.79-.14,1.1-.37,.31,.23,.69,.37,1.1,.37s.79-.14,1.1-.37c.31,.23,.69,.37,1.1,.37s.79-.14,1.1-.37c.31,.23,.69,.37,1.1,.37,1.02,0,1.85-.83,1.85-1.85v-.2h10.57c.97,0,1.77-.79,1.77-1.77s-.79-1.77-1.77-1.77ZM6.53,9.32c-.19,0-.35-.16-.35-.35v-3.86c0-.19,.16-.35,.35-.35s.35,.16,.35,.35v3.86c0,.19-.16,.35-.35,.35Zm2.2,0c-.19,0-.35-.16-.35-.35v-3.86c0-.19,.16-.35,.35-.35s.35,.16,.35,.35v3.86c0,.19-.16,.35-.35,.35Zm2.2,0c-.19,0-.35-.16-.35-.35v-3.86c0-.19,.16-.35,.35-.35s.35,.16,.35,.35v3.86c0,.19-.16,.35-.35,.35Zm2.55-.35c0,.19-.16,.35-.35,.35s-.35-.16-.35-.35v-3.86c0-.19,.16-.35,.35-.35s.35,.16,.35,.35v3.86Zm12.07-1.7H14.99v-.53h10.57c.15,0,.27,.12,.27,.27s-.12,.27-.27,.27Z"/></svg>

    SVGRでコンポーネントに変換する

    SVGRのPLAYGROUND の SVG input に SVG のコードを入力するとコンポーネントに変換される。

    import * as React from "react"
const SvgComponent = (props) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width={800}
    height={800}
    data-name="Layer 1"
    viewBox="0 0 32 32"
    {...props}
  >
    <path d="M26.01 15.24H6c-.41 0-.75.34-.75.75 0 4.24 2.47 7.91 6.05 9.66V28c0 .41.34.75.75.75h7.92c.41 0 .75-.34.75-.75v-2.35c3.57-1.75 6.04-5.41 6.04-9.65 0-.41-.34-.75-.75-.75Zm-6.79 12.01H12.8v-.99c1.01.32 2.09.49 3.21.49s2.2-.17 3.22-.49v.99Zm-3.22-2c-4.13 0-7.63-2.72-8.82-6.47h14.69c.41 0 .75-.34.75-.75s-.34-.75-.75-.75H6.85c-.03-.18-.05-.36-.07-.54h18.45c-.38 4.75-4.37 8.51-9.23 8.51ZM25.55 5.23H14.99V5.1c0-1.02-.83-1.85-1.85-1.85-.41 0-.79.14-1.1.37-.31-.23-.69-.37-1.1-.37s-.79.14-1.1.37c-.31-.23-.69-.37-1.1-.37s-.79.14-1.1.37c-.31-.23-.69-.37-1.1-.37-1.02 0-1.85.83-1.85 1.85v3.86c0 1.02.83 1.85 1.85 1.85.41 0 .79-.14 1.1-.37.31.23.69.37 1.1.37s.79-.14 1.1-.37c.31.23.69.37 1.1.37s.79-.14 1.1-.37c.31.23.69.37 1.1.37 1.02 0 1.85-.83 1.85-1.85v-.2h10.57c.97 0 1.77-.79 1.77-1.77s-.79-1.77-1.77-1.77ZM6.53 9.32c-.19 0-.35-.16-.35-.35V5.11c0-.19.16-.35.35-.35s.35.16.35.35v3.86c0 .19-.16.35-.35.35Zm2.2 0c-.19 0-.35-.16-.35-.35V5.11c0-.19.16-.35.35-.35s.35.16.35.35v3.86c0 .19-.16.35-.35.35Zm2.2 0c-.19 0-.35-.16-.35-.35V5.11c0-.19.16-.35.35-.35s.35.16.35.35v3.86c0 .19-.16.35-.35.35Zm2.55-.35c0 .19-.16.35-.35.35s-.35-.16-.35-.35V5.11c0-.19.16-.35.35-.35s.35.16.35.35v3.86Zm12.07-1.7H14.99v-.53h10.57c.15 0 .27.12.27.27s-.12.27-.27.27Z" />
  </svg>
)
export default SvgComponent

    SVGR
    https://www.sankoucode.com/svg-component

    変換されたコンポーネントをインポートして使用する

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。

    import './App.css'
import SvgComponent1 from './SvgComponent1'

function App() {

  return (
    <>
      <h1>React + SVG</h1>
      <div className={`svgWrap--01`}>
        <SvgComponent1 />
      </div>
    </>
  )
}

export default App;