• Stars
    star
    937
  • Rank 48,766 (Top 1.0 %)
  • Language
    TypeScript
  • License
    Apache License 2.0
  • Created over 4 years ago
  • Updated 3 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Tool to convert SVG to SwiftUI's Shape structure.

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.

"Buy Me A Coffee"

Disclaimer (Before you use this tool)

This tool is oriented towards specific implementations where you might otherwise need to convert the icon into SwiftUI Shape manually, for example when you need a custom animatable icon, need to use SFSymbol in your macOS app, etc. For general purpose icons it might be better to use this guide to create an SF Symbol instead.

Usage

Step 1

⭐️ Star this repository! ⭐️

Online

The tool is available online, just follow this link.

Running locally

git clone https://github.com/quassum/SVG-to-SwiftUI
cd SVG-to-SwiftUI
yarn
yarn dev

Functionality Coverage

This repository is just a front-end wrapper over our svg-to-swiftui-core (npm link) package. You can find the functionality coverage on that package's page. We encourage you checking it out and maybe starring it on GitHub 😍!

Example usage

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

In SwiftUI View, exported as a Shape

SVG file wiewed in the browser

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

Antoni Silvestrovic

License

MIT

More Repositories

1

use-cookie-consent

Smol (~1kB gzipped) hook for managing GDPR cookie consent state.
TypeScript
402
star
2

squircle-js

A squircle element for your favourite frontend framework!
TypeScript
96
star
3

easy-npm-package-react

React and Typescript NPM package setup, just add your code and you should be able to publish it to NPM
JavaScript
12
star
4

next-graphql-let-plugin

Frictionless automatic GraphQL Typescript generation setup for Next.js
JavaScript
8
star
5

golang-rpc-example

Example setup of golang's built-in RPC
Go
5
star
6

excuse-generator

Find an excuse when you run out of them.
TypeScript
4
star
7

liverpool-dissertation

Simulink in the browser (almost)
JavaScript
4
star
8

ssh.antoni.ai

My resumé which is accessible through ssh
Go
3
star
9

macOS-Airport-Tool

This is an attempt to replicate 'Airport' tool found in the depths of macOS. It also allows connecting to a specific bssid.
Swift
3
star
10

st-andrews-dissertation

Code for my MSc Artificial Intelligence dissertation at the University of St Andrews
Jupyter Notebook
3
star
11

sp-hooks

Use search params as a state in your web application.
TypeScript
3
star
12

bring-shrubbery

2
star
13

styled-latex

Styled Latex Components
TypeScript
2
star
14

polyrhythm

Polyrhythm generation algorithm written in every language I need.
Swift
2
star
15

blog.antoni.ai

JavaScript
2
star
16

transfer-go-coding-task

Coding Task For TransferGo (ghosted by them)
TypeScript
2
star
17

antoni.ai

My portfolio built with Astro, Tailwind and Solid.js
TypeScript
2
star
18

nextjs-typescript-graphql-template

TypeScript and GraphQL Example with better folder structure
TypeScript
2
star
19

use-step-machine

State machine hook for all things that can make steps.
TypeScript
2
star
20

weblightProject

y2 project
JavaScript
1
star
21

test-table-grouping

Created with CodeSandbox
TypeScript
1
star
22

next-radix-stitches-typescript-eslint-template

Next.js + RadixUI + Stitches.js + Typescript + ESLint + Prettier
TypeScript
1
star
23

advent-of-code-2021

My bad attempt at solving stuff at Advent of Code 2021
JavaScript
1
star
24

advent-of-code-2022

My bad attempt at Advent of Code 2022
TypeScript
1
star
25

ts-jest-gts-template

Template for Node.js projects using GTS with Jest and TypeScript
TypeScript
1
star
26

bring-shrubbery.github.io

personal portfolio website
HTML
1
star
27

my-tech

1
star
28

stm32-rs-workspace-example

bug reproduction
Rust
1
star
29

msagl-js

JavaScript graph layout library
TypeScript
1
star
30

use-crud

Definition-first API hook.
TypeScript
1
star
31

tensorflow.js-template

Run tensorflow.js quickly from your browser on in node.
HTML
1
star