Javascript 将SVG图标导入苗条应用程序的最佳方法

我有大约80个自定义SVG图标，我正在导入到一个苗条的前端应用程序中。在此基础上，它采用了汇总功能，包括打字稿、顺风和所有现代商品

难题在于如何将图标添加到应用程序中。作为SVG，图标是不超过2kB的短XML文本字符串

选项1：作为图像资产

将所有图标作为

foo.svg

上传到

public/assets/icons

中

---

创建一个苗条组件

一个有效的解决方案是将SVG保存在一个单独的IconService.js中：

export const chevron_down = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-chevron-down\"><polyline points=\"6 9 12 15 18 9\"></polyline></svg>";

export const chevron_right = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-chevron-right\"><polyline points=\"9 18 15 12 9 6\"></polyline></svg>";

export const chevron_down=“”；
出口const雪佛龙_right=“”；

这可以很容易地导入并在svelte@html函数中使用

<script>
    import {chevron_down, chevron_right} from 'IconService';
</script>

{@html chevron_down}


从“IconService”导入{chevron_down，chevron_right}；
{@html chevron_down}
以下方法具有以下优点：


一个中心点，用于维护应用程序的所有图标
减少获取SVG图标的网络请求
整个应用程序中可重用的图标，无需重复svg元素

有一个专用图标。苗条组件设置如下：

<script>
    export let name;
    export let width = "1rem";
    export let height = "1rem";
    export let focusable = false;
    let icons = [
        {
          box: 24,
          name: "save",
          svg: `<g stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/><path d="M17 21v-8H7v8"/><path d="M7 3v5h8"/></g>`
        },
        {
          box: 32,
          name: "trash",
          svg: `<path d="M12 12h2v12h-2z" /><path d="M18 12h2v12h-2z" /><path d="M4 6v2h2v20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8h2V6zm4 22V8h16v20z" /><path d="M12 2h8v2h-8z" />`
        }
    ];
    let displayIcon = icons.find((e) => e.name === name);
</script>
<svg
  class={$$props.class}
  {focusable}
  {width}
  {height}
  viewBox="0 0 {displayIcon.box} {displayIcon.box}">{@html displayIcon.svg}</svg>


出口许可证名称；
导出let width=“1rem”；
导出let height=“1rem”；
导出let focusable=false；
让图标=[
{
方框：24，
名称：“保存”，
svg：``
},
{
方框：32，
名称：“垃圾”，
svg：``
}
];
让displayIcon=icons.find（（e）=>e.name==name）；
{@html displayIcon.svg}

然后您可以这样使用它：

<Icon name="trash" class="this-is-optional" />


您只需将文件扩展名更改为
.svelte
并将SVG作为普通组件导入即可。
选项3：从仅包含
d
路径数据的字符串创建带有
自定义元素的SVG客户端；请参阅-我从未使用过Svelte版本，因为Svelte可以很好地处理
本机元素。我已经从不同的图标集转换了7000多个图标-JS代码只有800字节Gzip。如果“图标”有50-100kB，则“设计器”有问题。我用16kB和29kBI做的，总是把它们内联起来（选项2），但要确保优化所有svg，这些大小确实非常大，您可以使用svgomg之类的工具进行优化。如果图标来自设计师，他们的工具可能也可以导出它们，只需检查svg，如果你看到大量垃圾而不是普通路径，这表明它们没有得到优化。关注移动3G，速度必须先行（我更喜欢Danny的选项3，就像其他人说的，仅svg的尺寸似乎很大）@StephaneVanraes你是说1kb大还是50kb大？这到底有什么帮助？我想问题是：将SVG图标导入到Svelte应用程序的最佳方法使用此与typescript当前会为“name”道具抛出typeerror，因为在使用react/tsx和Svelte转换为tsx进行typescript时，这似乎是保留的。还为focusable属性抛出类型错误，但这似乎可能会更改为“false”，因为字符串包含false而不是boolean类型。