{"plugin":{"id":11,"name":"svg-to-jsx-loader","icon":"🔄","description":"load SVG file as Jsx importable module ","longDescription":"### SVG Loader\n#### Overview\nThe SVG loader is a utility that transforms SVG files into React JSX components. This transformation can occur at both build time and runtime, providing flexibility in how you integrate SVGs into your React applications.\n\n#### Key Features\n* **Build Time Transformation**: Converts SVG files into React JSX components during the build process, allowing for optimized and efficient rendering.\n* **Runtime Transformation**: Also capable of transforming SVG files at runtime, enabling dynamic loading and rendering of SVGs based on application needs.\n* **Module Export**: Exports a default React JSX function, making it easy to import and use the transformed SVG components in your React code.\n* **Props Support**: The exported React JSX function supports props, allowing you to dynamically customize the appearance and behavior of the SVG components.\n\n#### Usage\nTo use the SVG loader, simply import the default export into your React component and use it like any other JSX element. You can pass props to customize the SVG's attributes, such as `className`, `style`, or any other valid SVG attribute.","version":"0.1.0","compatibleVersions":">=2.0.0 <4.0.0","author":"Justin Halle","ownerId":"c166cdde-5f5c-40e5-a3ff-236652fa88a9","category":"utilities","tags":["svg","loader","jsx"],"published":true,"npmPackage":"frame-master-svg-to-jsx-loader","githubUrl":"https://github.com/shpaw415/frame-master-svg-to-jsx-loader","docsUrl":null,"installation":"bun add frame-master-svg-to-jsx-loader","quickStart":"// .frame-master/frame-master-custom-type.d.ts\ndeclare module \"*.svg\" {\n  import type { FC, SVGProps } from \"react\";\n  const content: FC<SVGProps<SVGElement>>;\n  export default content;\n}\n\n// index.tsx\nimport Logo from \"./assets/logo.svg\";\nimport Icon from \"./icons/arrow.svg\";\n\nfunction App() {\n  return (\n    <div>\n      <Logo className=\"logo\" width={200} height={100} />\n      <Icon style={{ fill: \"red\" }} />\n    </div>\n  );\n}","configuration":"import type { FrameMasterConfig } from \"frame-master/server/types\";\nimport svgToJsxLoader from \"frame-master-svg-to-jsx-loader\";\n\nconst config: FrameMasterConfig = {\n  HTTPServer: { port: 3000 },\n  plugins: [svgToJsxLoader()],\n};\n\nexport default config;","upvote":0,"downvote":0,"createdAt":"2025-12-11T02:17:16.000Z","updatedAt":"2025-12-11T02:17:16.000Z","dependencies":[]}}