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.

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 install or yarn install
• npm run dev or yarn 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