https://github.com/jaredlunde/snowpack-plugin-svgr
Use svgr to transform your SVGs into React components with Snowpack
https://github.com/jaredlunde/snowpack-plugin-svgr
snowpack snowpack-plugin snowpack-svgr svgr
Last synced: 10 months ago
JSON representation
Use svgr to transform your SVGs into React components with Snowpack
- Host: GitHub
- URL: https://github.com/jaredlunde/snowpack-plugin-svgr
- Owner: jaredLunde
- License: mit
- Created: 2020-07-31T00:32:37.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T12:54:07.000Z (over 3 years ago)
- Last Synced: 2025-08-03T22:54:21.994Z (10 months ago)
- Topics: snowpack, snowpack-plugin, snowpack-svgr, svgr
- Language: TypeScript
- Homepage:
- Size: 2.45 MB
- Stars: 18
- Watchers: 3
- Forks: 4
- Open Issues: 18
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# snowpack-plugin-svgr
> Use [svgr](https://github.com/gregberge/svgr) to transform your SVGs into React components with Snowpack
```sh
npm i -D snowpack-plugin-svgr
```
---
## Quick start
```js
// snowpack.config.json
{
"plugins": [["snowpack-plugin-svgr", { /* see "Plugin Options" below */ }]]
}
```
#### Plugin Options
```typescript
interface SnowpackPluginSvgrOptions {
/**
* Includes only the specified paths
*/
include?: string[]
/**
* Excludes the specified paths
*/
exclude?: string[]
/**
* These options are passed directly to babel.transformAsync()
*/
babelOptions?: TransformOptions
/**
* These options are passed directly to `@svgr/core`'s `convert()` function
* See: https://react-svgr.com/docs/options/
*/
svgrOptions?: any
}
```
## Usage
```js
import CatIcon from './assets/icons/cat.svg'
// Use like you would an `` component
```
#### Adding types to a TypeScript app
In `types/static.d.ts`
```typescript
// Replace this
declare module '*.svg' {
const ref: string
export default ref
}
// With this
declare module '*.svg' {
const ref: React.RefForwardingComponent<
SVGSVGElement,
React.SVGAttributes
>
export default ref
}
```
## LICENSE
MIT