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.
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
How to run
npm run installoryarn installnpm run devoryarn dev
By default, you will have 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
{
"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/: An Angular components library to use Heroicons.com in your Angular projects.
- https://randomdata.loremapi.io/: A tool to create mock Api responses with your custom schema.
- https://svg-icon-2-fw-component.dimaslz.dev: A tool to create a framework icon component from a SVG
- https://loremapi.io: Mock and document your Api's
- https://cv.dimaslz.dev: My online CV
- https://api.dimaslz.dev: My professional info by API
- https://dimaslz.dev: Dev landing
- https://dimaslz.com: Profesional landing profile
