All Projects → kazijawad → esbuild-plugin-svgr

kazijawad / esbuild-plugin-svgr

Licence: MIT license
A plugin for esbuild that enables importing *.svg files as React components.

Programming Languages

javascript
184084 projects - #8 most used programming language
CSS
56736 projects

Projects that are alternatives of or similar to esbuild-plugin-svgr

esbuild-plugin-alias
esbuild plugin for path aliases
Stars: ✭ 20 (-25.93%)
Mutual labels:  esbuild, esbuild-plugin
build-plugin
Track your build performances like never before.
Stars: ✭ 45 (+66.67%)
Mutual labels:  esbuild, esbuild-plugin
esbuild-plugin-import-glob
A esbuild plugin which allows to import multiple files using the glob syntax.
Stars: ✭ 28 (+3.7%)
Mutual labels:  esbuild, esbuild-plugin
esbuild-css-modules-plugin
A esbuild plugin to bundle css modules into js(x)/ts(x)
Stars: ✭ 64 (+137.04%)
Mutual labels:  esbuild, esbuild-plugin
webpack-typescript-react
Webpack 5 boilerplate with support of most common loaders and modules (see tags and description)
Stars: ✭ 185 (+585.19%)
Mutual labels:  svgr
atbuild
Use JavaScript to generate JavaScript
Stars: ✭ 26 (-3.7%)
Mutual labels:  esbuild
rc-dynamic
React DnD component tree --- React 动态组件树 Demo
Stars: ✭ 14 (-48.15%)
Mutual labels:  esbuild
svg-gobbler
Open source browser extension that makes designing and developing easier by finding, processing, exporting, optimizing, and managing SVG content.
Stars: ✭ 272 (+907.41%)
Mutual labels:  svgr
tutorials
This repository contains all the code snippets from articles and videos
Stars: ✭ 33 (+22.22%)
Mutual labels:  esbuild
aegir
AEgir - Automated JavaScript project building
Stars: ✭ 73 (+170.37%)
Mutual labels:  esbuild
esbuild-plugin-relay
An esbuild plugin to transform tagged GraphQL template literals for Relay.
Stars: ✭ 14 (-48.15%)
Mutual labels:  esbuild
unplugin-vue
✨ Transform Vue 3 SFC to JavaScript. Supports Vite, esbuild, Rollup and Webpack.
Stars: ✭ 38 (+40.74%)
Mutual labels:  esbuild
babel-preset-svgr
Babel preset for SVG importing into React apps using Babel & SVGR
Stars: ✭ 18 (-33.33%)
Mutual labels:  svgr
twitter-web-react
twitter-web-react.now.sh
Stars: ✭ 104 (+285.19%)
Mutual labels:  svgr
esbuild-svelte
An esbuild plugin to compile Svelte components
Stars: ✭ 163 (+503.7%)
Mutual labels:  esbuild
typescript-boilerplate
A modern TypeScript project setup, for Node.js and browsers (using esbuild).
Stars: ✭ 502 (+1759.26%)
Mutual labels:  esbuild
rescript-react-boilerplate
An opinionated app shell for ReScript & React progressive web apps
Stars: ✭ 62 (+129.63%)
Mutual labels:  esbuild
blurhash-as
Blurhash implementation in AssemblyScript
Stars: ✭ 26 (-3.7%)
Mutual labels:  esbuild-plugin
vitext
The Next.js like React framework for better User & Developer experience!
Stars: ✭ 376 (+1292.59%)
Mutual labels:  esbuild
reiconify
Convert SVG icons to React components eg.: https://ambar.li/reiconify/md.icons/#/Browse
Stars: ✭ 17 (-37.04%)
Mutual labels:  svgr

esbuild-plugin-svgr

A plugin for esbuild that adds support for *.svg file imports as React components. The plugin is built on top of SVGR.

Basic Usage

  1. Install the plugin in your project:
npm install --save-dev esbuild-plugin-svgr
# or use yarn
yarn add --dev esbuild-plugin-svgr
  1. Add this plugin to your esbuild build script:
import esbuild from 'esbuild'
import svgr from 'esbuild-plugin-svgr'

await esbuild.build({
    plugins: [
        svgr(),
    ],
})
  1. Import your *.svg file from JavaScript:
import Icon from './icon.svg';

function App() {
    return (
        <div>
            <Icon />
        </div>
    );
}
  1. Pass in optional supported configuration options:
esbuild.build({
    plugins: [
        svgr({ ref: true }),
    ],
});

License

This project is licensed under the MIT License - see the LICENSE.md file for details.

Acknowledgements

SVGR

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].