Convert your SVG file directly to Flutter paths and prevent all the messing with bezier curves.

Overview

svg-to-flutter-path-converter

Convert your SVG file directly to Flutter paths and prevent all the messing with bezier curves.

https://www.flutterclutter.dev/images/tools/svg-to-flutter-path-converter.png

Flutter Clutter

The tool was made in the context of my blog.
Find a demo here.
Also, a how to can be found here.

Usage as CLI Tool

To use this tool via CLI:

  • Clone this repository
  • cd into cloned directory

Use locally

If you want to install it locally to prevent pollution of your global node namespace, do this:

npm i

Then you can run the conversion using

npm start convert <svgFilePath> [options]

Use globally

If you want use it outside of the repository directory as well, use this:

npm i -g

The syntax to call the conversion via CLI is as follows:

svg-to-flutter convert <svgFilePath> [options]

The general usage looks like this:

Usage: svg-to-flutter [options] [command]

Commands:
  convert <filePath> [options]  Convert svg file to Flutter path
  help [command]      display help for command

Store the result on the file system

When you run it without any options, it will directly return the output. In order to store the result on the file system, use the optional output argument (-o or --output). You can either provide a directory, which will create a file output.dart or a path to a file you want to have created.

svg-to-flutter convert input.svg -o .
svg-to-flutter convert input.svg -o my-output.dart

Collaborators

  • Wojciech Warwas - Thankfully converted the JS+HTML tool into a separate node module

npm integration coming soon!

You might also like...

Flutter makes it easy and fast to build beautiful apps for mobile and beyond

Flutter makes it easy and fast to build beautiful apps for mobile and beyond

Flutter is Google's SDK for crafting beautiful, fast user experiences for mobile, web, and desktop from a single codebase. Flutter works with existing

Jan 7, 2023

A quickstart AWS Lambda function code generator. Downloads a template function code file, test harness file, sample SAM deffiniation and appropriate file structure.

Welcome to function-stencil 👋 A quickstart AWS Lambda function code generator. Downloads a template function code file, test harness file, sample SAM

Jun 20, 2022

portfolio-project is a npm package to automatically update your projects section in your portfolio website. It will fetch the selected repositories directly from your GitHub account.

portfolio-project is a npm package to automatically update your projects section in your portfolio website. It will fetch the selected repositories directly from your GitHub account.

portfolio-project Those days of manually updating portfolio website after every new project made are gone ⚡ Yesss . . . you read that right. 😉 portfo

Aug 3, 2021

This is an application that entered the market with a mobile application in real life. We wrote the backend side with node.js and the mobile side with flutter.

HAUSE TAXI API Get Started Must be installed on your computer Git Node Firebase Database Config You should read this easy documentation Firebase-Fires

Nov 4, 2021

Short sample and instructions for configuring a Flutter Web application to deploy-on-push to Firebase Hosting

Short sample and instructions for configuring a Flutter Web application to deploy-on-push to Firebase Hosting

Nov 17, 2022

JavaScript framework for creating beautiful, fast and lightweight websites based on flutter way of coding ☜(゚ヮ゚☜)

Welcome to Flutjs project 😀 Flutjs is a javascript framework for creating beautiful, fast and lightweight websites. As the name suggests, Flutejs is

Nov 9, 2022

Optimized dracula theme vscode extension for flutter, web, electron and golang development.

Optimized dracula theme vscode extension for flutter, web, electron and golang development.

Optimized Dracula Theme A color theme inspired by dracula color theme. This color theme is not based on dracula color theme. The color styles are simi

Jul 11, 2022

It's a set of common utility strategies to work with responsive styles with Flutter and CSS in JS

It's a set of common utility strategies to work with responsive styles with Flutter and CSS in JS

@skynexui/responsive_stylesheet You don't need to be worried just because you have to support multiple screens 📺 🖥 💻 📱 It's a set of common utilit

Oct 26, 2022

Serve file server with single zip file as file system in Deno.

zipland Serve file server with one-single zip file in Deno. Support zip just zip32 with deflated or uncompressed serving plaintext deflate Examples Yo

Nov 2, 2022
Comments
  • ReferenceError: width is not defined

    ReferenceError: width is not defined

    Hi

    When i run the following command

    svg-to-flutter convert Downloads/ic_mail.svg -o path.dart

    i get this error

    /Users/user1/svg-to-flutter-path-converter/src/convert.js:252
      let pathData = getPathData(shapes, width, height);
                                         ^
    ReferenceError: width is not defined
        at shapesToFlutterCodeConverter (/Users/user1/svg-to-flutter-path-converter/src/convert.js:252:38)
        at SvgToFlutterPathConverter.convertFromString (/Users/user1/svg-to-flutter-path-converter/src/convert.js:54:12)
        at SvgToFlutterPathConverter.convertFromFilePath (/Users/user1/svg-to-flutter-path-converter/src/convert.js:26:17)
        at Command.<anonymous> (/Users/user1/svg-to-flutter-path-converter/src/index.js:24:35)
        at Command.listener [as _actionHandler] (/Users/user1/svg-to-flutter-path-converter/node_modules/commander/lib/command.js:481:17)
        at /Users/user1/svg-to-flutter-path-converter/node_modules/commander/lib/command.js:1237:65
        at Command._chainOrCall (/Users/user1/svg-to-flutter-path-converter/node_modules/commander/lib/command.js:1153:12)
        at Command._parseCommand (/Users/user1/svg-to-flutter-path-converter/node_modules/commander/lib/command.js:1237:27)
        at Command._dispatchSubcommand (/Users/user1/svg-to-flutter-path-converter/node_modules/commander/lib/command.js:1059:25)
        at Command._parseCommand (/Users/user1/svg-to-flutter-path-converter/node_modules/commander/lib/command.js:1202:19)
    
    Node.js v18.3.0
    

    i tried with a big svg then thought size might be an issue or file included tags unknown..etc, then i tried with a smaller svg you will find it below

    email

    Thanks in advance.

    opened by m7mdra 3
Owner
null
Smoothly interpolate between variations of SVG paths.

svg-path-morph A simple library for morphing between variations of SVG paths. Use svg-path-morph to smoothly morph between X variations of the same SV

Anders Brams 649 Jan 3, 2023
JSON Visio is data visualization tool for your json data which seamlessly illustrates your data on graphs without having to restructure anything, paste directly or import file.

JSON Visio is data visualization tool for your json data which seamlessly illustrates your data on graphs without having to restructure anything, paste directly or import file.

Aykut Saraç 20.6k Jan 4, 2023
📃 Typed primitives for Typescript to work with file paths

typed-file-system-path typed-file-system-path takes inspiration from Path.swift in swift-tools-support-core and provides typed primitives to work with

Craftweg 6 Dec 15, 2022
LunaSec - Open Source Security Software built by Security Engineers. Scan your dependencies for Log4Shell, or add Data Tokenization to prevent data leaks. Try our live Tokenizer demo: https://app.lunasec.dev

Our Software We're a team of Security Engineers on a mission to make awesome Open Source Application Security tooling. It all lives in this repo. Here

LunaSec 1.2k Jan 7, 2023
Statically prevent 404s in your Next.js applications using TypeScript

next-static-paths Statically prevent HTTP 404 Not Found in your Next.js applications using TypeScript and code generation. Features ?? A command-line

Gal Schlezinger 23 Jul 3, 2022
Feel free to create new file, don't hesitate to pull your code, the most important thing is that the file name here must match your nickname so that file does not conflict with other people.

Hacktoberfest Indonesia Apa Itu Hacktoberfest ? Hacktoberfest adalah acara tahunan yang bertujuan untuk mendorong berkontribusi kedalam ekosistem open

Juan Daniel 5 Dec 15, 2022
The full power of the Go Compiler directly in your browser, including a virtual file system implementation. Deployable as a static website.

Static Go Playground Features Full Go Compiler running on the browser. Supports using custom build tags. Incremental builds (build cache). Supports mu

null 25 Jun 16, 2022
Node.js package with a customized HTTP and HTTPS agents to prevent SSRF with hosts validations and custom DNS feature.

http-agent-dns This is a Node.js package with a customized HTTP and HTTPS agents to prevent SSRF with hosts validations with a possibility to use a cu

Bruno Germano 4 Jul 21, 2022
Make text fit container, prevent overflow and underflow.

AutoTextSize Make text fit container, prevent overflow and underflow. The font size of the text is adjusted so that it precisely fills its container.

Sana Labs 10 Dec 30, 2022
🍎Transform an SVG icon into multiple themes, and generate React icons,Vue icons,svg icons

IconPark English | 简体中文 Introduction IconPark gives access to more than 2000 high-quality icons, and introduces an interface for customizing your icon

Bytedance Inc. 6.8k Jan 5, 2023