OMNIGRAFFLE IMPORT SVG CODE

Using like SVG_CODE} for rendering a svg code from another component or variable is a Bad choice. and then just use the part you need in markup. This way you use one http call to load svg file. Then in your code do something like this : Let displayIcon = icons.find((e) => e.name = displayIcon.svg}Īnother way is to use a symbol defs file (ex: icons.svg) in your public folder. Have a dedicated Icon.svelte component setup like this:

Reusable icons throughout the app without having duplicate svg elements.

Reduced network requests for fetching SVG icons.

One central point to maintain all your icons for your app.

The following approach has these advantages:

Does the calculus change if the 'icons' are detailed images that are 50-100kB instead of the tiny strings here?.

It seems that building icons in tthe app is a better way from this analysis, but have I missed something?.

Makes the rendering slower because Javascript code needs to first turn a string into an SVG instead of just loading an image.

colors, viewBox, etc on load.Ĭons: It's unnecessary to include all icons in the app to reduce time to first byte. Possible to dynamically modify some of the icon code e.g. Here, the icons are bundled as text strings with the app itself.īenefits: Icons are delivered as part of the app bundle. Create a svelte component that selects the right imported component or SVG string and displays it.Use something like or to directly import each icon into code: import Home from './icons/home.svg'.Deploying the app as a PWA means we need to manually tell it to cache the icons beforehand. No need to bundle all icons into app code.Ĭons: slow page load if there are a lot of new icons, and the browser has to fetch a dozen 1kB files. This approach means that the icons are not part of the code.īenefits: icons can be dynamically loaded by frontend code on demand. Create a svelte component that displays an the icon using.Upload all the icons as foo.svg into public/assets/icons.As SVGs, the icons are short XML text strings that do not exceed 2kB.

OMNIGRAFFLE IMPORT SVG HOW TO

The dilemma is how to add the icons into the app. Building on, it's built with Rollup and includes Typescript, Tailwind, and all the modern goodies. I have about 80 custom SVG icons that I'm importing into a Svelte front-end app.

Omnigraffle import svg