https://github.com/bartektelec/svelte-svg-transform
Easily transform SVG files inside of Svelte components
https://github.com/bartektelec/svelte-svg-transform
dx icons svelte sveltekit svg ui
Last synced: 1 day ago
JSON representation
Easily transform SVG files inside of Svelte components
- Host: GitHub
- URL: https://github.com/bartektelec/svelte-svg-transform
- Owner: bartektelec
- License: mit
- Created: 2023-05-06T13:09:03.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2025-10-01T20:31:57.000Z (6 days ago)
- Last Synced: 2025-10-01T22:22:14.604Z (6 days ago)
- Topics: dx, icons, svelte, sveltekit, svg, ui
- Language: Svelte
- Homepage: https://bartektelec.github.io/svelte-svg-transform/
- Size: 241 KB
- Stars: 27
- Watchers: 1
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# 🖍️svelte-svg-transform
[Live Demo](https://bartektelec.github.io/svelte-svg-transform/)
A tiny library that makes it easier for you to add SVGs and tranform them in your svelte project.
You won't need to rename your `.svg` files to `.svelte` and manually edit them.
Independent from DOMParser, so it works just fine during server-side rendering.
[](https://www.npmjs.com/package/svelte-svg-transform) [](https://npmcharts.com/compare/svelte-svg-transform?interval=30&minimal=true)    [](https://github.com/bartektelec/svelte-svg-transform/blob/main/LICENSE)
## Install
```sh
npm install svelte-svg-transform
```
## Usage
- Import in your component and pass it your SVG
- Import your Icon's raw markup
- Pass the icon to the component and transform it using props
```tsx
// important! include the ?raw at the end of your SVG import
import MyIcon from '../path/to/icon.svg?raw';
// component is default exported so you can call it whatever you want!
import SvgTransform from 'svelte-svg-transform';
;
// => outputs a 32px x 32px INLINE svg
// => with 3px thick stroke of same color as parent's text
```
## Props
The component exposes some props that make it easier to manipulate SVG type files.
Make sure to pass your SVG's **raw** markup to the component like so:
```tsx
import SvgIcon from 'svelte-svg-transform';
import MyIcon from '../path/to/icon.svg?raw';
;
```
From there you can use these props on the component:
### svg
Type: `string (svg markup)`
Required
Accepts only raw svg markup that you want to transform.
### width
Type: `number`
Default: 20
Sets svg's width to desired pixels.
### height
Type: `number`
Default: Same as width
Sets svg's height to desired pixels, if not passed will use the same as width.
### fill
Type: `string`
Override any hard-coded fill colors _except none_
### stroke
Type: `string`
Override any hard-coded stroke colors _except none_
#### fillOpacity
Type: `number`
Range: 0-1
Optional
Change svg's internal fill-opacity properties (except none) to any value you want.
#### strokeWidth
Type: `number`
Optional
Change svg's internal stroke-width properties (except none) to any value you want.
#### strokeLineCap
Type: `string`
Optional
Change svg's internal stroke-line-cap properties (except none) to any value you want.
#### strokeOpacity
Type: `number`
Range: 0-1
Optional
Change svg's internal stroke-opacity properties (except none) to any value you want.
## Licence
[MIT](https://opensource.org/licenses/MIT)