从SVG图标创建图标组件
#javascript #tooling #自动化

每当您在SVG中拥有图标时，并且要在应用程序中使用它时，您都需要将其调整到框架的相应语法中。这是重复性和疲倦的东西：删除不必要的属性，添加继承类，继承样式，添加大小属性，如果适用，则案件，...

然后，在此https://svg2jsx.com上灵感来源，该工具是从SVG创建React组件的工具，我创建了https://svg-icon-2-fw-component.dimaslz.dev/，该工具是创建任何框架（Angular，Vue2，Vue3，Vue3，React，Sive，Svelte，Shefte，...）组件的工具，使用JavaScript创建https://svg-icon-2-fw-component.dimaslz.dev/。或打字稿变体，形成svg。

怎么运行的？

  1. 去https://svg-icon-2-fw-component.dimaslz.dev
  2. 复制一些SVG图标（例如https://heroicons.com，然后复制SVG版本）

  3. 将内容粘贴在左编辑器上（粘贴SVG字符串内容或在此处删除多个SVG文件）
    Default view

  4. 等待生成默认组件（在JSX中react）
    SVG converter working

  5. ，然后选择所需的框架，svelte + tyspript，例如
    Choose your option

  6. 您在Typescript中有一个很好的基本苗条组件

<script lang="ts">
  export let size: string | number = 24;
  export let stroke: string | number = 1;
</script>

<svg
  xmlns="http://www.w3.org/2000/svg"
  fill="none"
  stroke="currentColor"
  stroke-width={stroke}
  viewBox="0 0 24 24"
  style={`width: ${size}px; height: ${size}px; stroke-width=${stroke};`}
  ><path
    stroke-linecap="round"
    stroke-linejoin="round"
    d="M4.26 10.147a60.436 60.436 0 0 0-.491 6.347A48.627 48.627 0 0 1 12 20.904a48.627 48.627 0 0 1 8.232-4.41 60.46 60.46 0 0 0-.491-6.347m-15.482 0a50.57 50.57 0 0 0-2.658-.813A59.905 59.905 0 0 1 12 3.493a59.902 59.902 0 0 1 10.399 5.84 51.39 51.39 0 0 0-2.658.814m-15.482 0A50.697 50.697 0 0 1 12 13.489a50.702 50.702 0 0 1 7.74-3.342M6.75 15a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5zm0 0v-3.675A55.378 55.378 0 0 1 12 8.443m-7.007 11.55A5.981 5.981 0 0 0 6.75 15.75v-1.5"
  /></svg
>

如何将其与多个SVG文件一起使用？

  1. 拖放并删除您的SVG文件
    Drag and drop SVG files

  2. 选择您的框架
    Choose your framework

  3. 选择语言（JavaScript或Typescript）
    Choose the language

  4. 在zip文件中下载图标
    Download icons

文件名的格式为icon-builder-{datetime}-framework.zip。在此文件中，您将在应用程序中使用所有要使用的文件。

结尾

您喜欢吗？，我感谢反馈。随时在此处添加问题的问题https://github.com/dimaslz/icon-lib-builder，并给我一个！激励我继续努力。

感谢您的阅读和愉快的编码！ ð - ð»