将 SVG 图标导入 Svelte 应用程序的最佳方式 [英] Best way to import SVG icons into a Svelte app

问题描述

我有大约 80 个自定义 SVG 图标可以导入到 Svelte 前端应用程序中.基于

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

选项 1:作为图像资产

1. 将所有图标作为 foo.svg 上传到 public/assets/icons.
2. 创建一个使用 <img src="foo.svg> 显示图标的 svelte 组件 <Icon type="foo'/>.

这种方法意味着图标不是代码的一部分.

优点:前端代码可以按需动态加载图标.无需将所有图标捆绑到应用代码中.

缺点:如果有很多新图标，页面加载速度会变慢，并且浏览器必须获取十几个 1kB 的文件.将应用部署为 PWA 意味着我们需要手动告诉它预先缓存图标.

选项 2:作为应用构建的一部分

1. 使用类似 https://github.com/cristovao-trevisan/svelte-icon 或 https://github.com/codefeathers/rollup-plugin-svelte-svg 直接将每个图标导入代码:import Home from './icons/home.svg';
2. 创建一个 svelte 组件，选择正确的导入组件或 SVG 字符串并显示它.

在这里，图标作为文本字符串与应用程序本身捆绑在一起.

优点:图标作为应用程序包的一部分提供.缓存是不必要的.可以动态修改一些图标代码，例如加载时的颜色、视图框等.

缺点:没有必要在应用中包含所有图标以减少到第一个字节的时间.不能在不增加复杂性的情况下进行捆绑拆分等.使渲染变慢，因为 Javascript 代码需要先将字符串转换为 SVG，而不仅仅是加载图像.

问题

• 从这个分析来看，在应用中构建图标似乎是更好的方法，但我是否遗漏了什么?
• 如果图标"不存在，微积分会发生变化吗?是 50-100kB 的详细图像而不是这里的小字符串吗?

解决方案

以下方法具有以下优点:

• 一个中心点来维护您应用的所有图标
• 减少了获取 SVG 图标的网络请求
• 可在整个应用程序中重复使用的图标，而没有重复的 svg 元素

有一个专用的 Icon.svelte 组件设置，如下所示:

<svgclass={$$props.class}{可聚焦}{宽度}{高度}viewBox=0 0 {displayIcon.box} {displayIcon.box}">{@html displayIcon.svg}</svg>

然后您可以像这样使用它:

I have about 80 custom SVG icons that I'm importing into a Svelte front-end app. Building on https://github.com/sveltejs/template, it's built with Rollup and includes Typescript, Tailwind, and all the modern goodies.

The dilemma is how to add the icons into the app. As SVGs, the icons are short XML text strings that do not exceed 2kB.

Option 1: as image assets

1. Upload all the icons as foo.svg into public/assets/icons.
2. Create a svelte component <Icon type="foo' /> that displays an the icon using <img src="foo.svg>.

This approach means that the icons are not part of the code.

Benefits: icons can be dynamically loaded by frontend code on demand. No need to bundle all icons into app code.

Cons: slow page load if there are a lot of new icons, and the browser has to fetch a dozen 1kB files. Deploying the app as a PWA means we need to manually tell it to cache the icons beforehand.

Option 2: as part of the app build

1. Use something like https://github.com/cristovao-trevisan/svelte-icon or https://github.com/codefeathers/rollup-plugin-svelte-svg to directly import each icon into code: import Home from './icons/home.svg';
2. Create a svelte component that selects the right imported component or SVG string and displays it.

Here, the icons are bundled as text strings with the app itself.

Benefits: Icons are delivered as part of the app bundle. Caching is unnecessary. Possible to dynamically modify some of the icon code e.g. colors, viewBox, etc on load.

Cons: It's unnecessary to include all icons in the app to reduce time to first byte. Can't do bundle splitting, etc. without adding more complexity. Makes the rendering slower because Javascript code needs to first turn a string into an SVG instead of just loading an image.

Questions

• It seems that building icons in tthe app is a better way from this analysis, but have I missed something?
• Does the calculus change if the "icons" are detailed images that are 50-100kB instead of the tiny strings here?

解决方案

The following approach has these advantages:

• One central point to maintain all your icons for your app
• Reduced network requests for fetching SVG icons
• Reusable icons throughout the app without having duplicate svg elements

Have a dedicated Icon.svelte component setup like this:

<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>

You can then use it like so:

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

这篇关于将 SVG 图标导入 Svelte 应用程序的最佳方式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！