https://github.com/bring-shrubbery/SVG-to-SwiftUI

Tool to convert SVG to SwiftUI's Shape structure.
https://github.com/bring-shrubbery/SVG-to-SwiftUI

svg swift swiftui swiftui-shape transpiler

Last synced: 2 months ago
JSON representation

Tool to convert SVG to SwiftUI's Shape structure.

• Host: GitHub
• URL: https://github.com/bring-shrubbery/SVG-to-SwiftUI
• Owner: bring-shrubbery
• License: apache-2.0
• Created: 2020-04-07T16:26:27.000Z (about 5 years ago)
• Default Branch: main
• Last Pushed: 2024-06-22T14:58:09.000Z (12 months ago)
• Last Synced: 2024-07-11T13:57:26.824Z (11 months ago)
• Topics: svg, swift, swiftui, swiftui-shape, transpiler
• Language: TypeScript
• Homepage: https://svg-to-swiftui.quassum.com
• Size: 131 MB
• Stars: 924
• Watchers: 9
• Forks: 37
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

• awesome-swiftui - quassummanus/SVG-to-SwiftUI - SVG to SwiftUI Shape converter tool. (Samples)

README

        


# SVG to SwiftUI Converter

Tool to convert SVG to SwiftUI's Shape structure. This approach is much more memory efficient than introducing a SVG library for rendering.



## Disclaimer (Before you use this tool)

This tool is oriented towards use cases, where creating an SF symbol is not viable, for example for complex animations. This tool also works great if you're under time pressure or just lazy, and need to have your icon in the app as fast as possible. For general purpose icons it might be better to use [this](https://developer.apple.com/documentation/uikit/uiimage/creating_custom_symbol_images_for_your_app) guide to create an SF Symbol instead.

## Quick Links

- [Web App (SVG to SwiftUI)](https://svg-to-swiftui.quassum.com?utm_source=github&utm_medium=readme)

- [Figma Plugin](https://dub.sh/figma-to-swiftui)

## Usage

### Step 1

⭐️ Star this repository! ⭐️

### Step 2.1: Online

The tool is available online, just follow [this](https://svg-to-swiftui.quassum.com/) link.

### Step 2.2: Running locally

```

git clone https://github.com/bring-shrubbery/SVG-to-SwiftUI

cd SVG-to-SwiftUI

pnpm install

pnpm dev

```

## Demo preview

To demonstrate this tool I created a thicc plus sign with rounded corners (created it in Sketch, so shapes from Sketch should work fine with this tool).

It's saved as `content/demo-plus.svg` file in this repository. You can see below how it looks like in the browser, and how it looks like after converting into SwiftUI Shape.

### In the browser

![SVG file wiewed in the browser](content/example_svg.png)

### In SwiftUI View, exported as a Shape

![SVG file wiewed in the browser](content/example_swift.png)

## Contributing

- Feel free to open an issue for the SVG code that did not work - provide the SVG code of course!

- Pull requests are very welcome! Introducing support for more SVG element types would be the best contribution at this point.

## Author

Please consider following this project's author, Antoni Silvestrovič on [Github](https://github.com/bring-shrubbery) or [Bluesky](https://bsky.app/profile/bring-shrubbery.bsky.social), or by starring the project to show your ❤️ and support.

## License

[MIT](https://github.com/bring-shrubbery/SVG-to-SwiftUI/blob/master/LICENSE)