Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dimaslz/icon-lib-builder
Small tool to generate a Framework component (React, Preact, Angular, Svelte or Vue) from a SVG icons. Copy and paste the SVG icon content to the tool and you will have a basic framework template to use the SVG icon in your project.
https://github.com/dimaslz/icon-lib-builder
angular react svelte vue
Last synced: 12 days ago
JSON representation
Small tool to generate a Framework component (React, Preact, Angular, Svelte or Vue) from a SVG icons. Copy and paste the SVG icon content to the tool and you will have a basic framework template to use the SVG icon in your project.
- Host: GitHub
- URL: https://github.com/dimaslz/icon-lib-builder
- Owner: dimaslz
- Created: 2021-03-23T09:10:38.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-08-26T23:03:11.000Z (2 months ago)
- Last Synced: 2024-10-11T12:44:47.566Z (28 days ago)
- Topics: angular, react, svelte, vue
- Language: TypeScript
- Homepage: https://svg-icon-2-fw-component.dimaslz.dev
- Size: 1.01 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-angular - icon-lib-builder - Small tool to generate a Framework component (React, Preact, Angular, Svelte or Vue) from a SVG icon. (Table of contents / Third Party Components)
- fucking-awesome-angular - icon-lib-builder - Small tool to generate a Framework component (React, Preact, Angular, Svelte or Vue) from a SVG icon. (Table of contents / Third Party Components)
- fucking-awesome-angular - icon-lib-builder - Small tool to generate a Framework component (React, Preact, Angular, Svelte or Vue) from a SVG icon. (Table of contents / Third Party Components)
README
# SVG Icon to Framework component
Small tool to generate a framework component (React, Preact, Angular, Vue, Vue3 or Svelte) from a SVG icons. Drop or paste your SVG icon content to the tool and you will have a basic framework template to use the svg icon in your project.
## Test and use in live
[https://svg-icon-2-fw-component.dimaslz.dev](https://svg-icon-2-fw-component.dimaslz.dev)
## How to run
- `npm run install` or `yarn install`
- `npm run dev` or `yarn dev`
By default, you will have [http://localhost:3000](http://localhost:3000), if you want to change the port, run `--port XXXX` after `dev` command
## Scripts
| Npm Script | Description |
| --------------- | ---------------------------------------------------------------------- |
| `dev` | run project to develop in local watching any change |
| `build` | build project run as `NODE_ENV=production yarn build` |
| `start` | once the project is built, serve the distribution content |
| `test` | run tests (verbose by default) with watch by default (not watch in CI) |
| `test run` | run tests (verbose by default) just one time |
| `test:coverage` | run tests (and verbose) and linten for changes |
| `lint` | lint code |
## Author
```json
{
"name": "Dimas López Zurita",
"role": "Senior Software Engineer",
"alias": "dimaslz",
"linkedin": "https://www.linkedin.com/in/dimaslopezzurita",
"github": "https://github.com/dimaslz",
"twitter": "https://twitter.com/dimaslz",
"tags": "tooling, docker, tailwindcss, vue, SAAS, nodejs+express"
}
```
## My other projects
- [https://ng-heroicons.dimaslz.dev/](https://ng-heroicons.dimaslz.dev/): An Angular components library to use Heroicons.com in your Angular projects.
- [https://randomdata.loremapi.io/](https://randomdata.loremapi.io/): A tool to create mock Api responses with your custom schema.
- [https://svg-icon-2-fw-component.dimaslz.dev](https://svg-icon-2-fw-component.dimaslz.dev): A tool to create a framework icon component from a SVG
- [https://loremapi.io](https://loremapi.io): Mock and document your Api's
- [https://cv.dimaslz.dev](https://cv.dimaslz.dev): My online CV
- [https://api.dimaslz.dev](https://api.dimaslz.dev): My professional info by API
- [https://dimaslz.dev](https://dimaslz.dev): Dev landing
- [https://dimaslz.com](https://dimaslz.com): Profesional landing profile