Icons

Install @poppanator/sveltekit-svg (link) package

This package converts svg files to svelte components.

pnpm add @poppanator/sveltekit-svg

Add @poppanator/sveltekit-svg to your vite.config.ts file

import svg from '@poppanator/sveltekit-svg'

export default defineConfig({
  plugins: [
    sveltekit(),
    svg({
      type: "component",
      svgoOptions: {
        multipass: true,
        plugins: [
          {
            name: 'preset-default',
            params: { overrides: { removeViewBox: false } },
          },
          { name: 'removeAttrs', params: { attrs: '(fill|stroke)' } },
        ],
      },
    }
  ]
})

Add this to your app.d.ts to get rid of the typescript error

import '@poppanator/sveltekit-svg/dist/svg.d.ts';

Install Shopify Polaris Icons

pnpm add @shopify/polaris-icons

Import it from the @shopify/polaris-icons package. Note the svg?component suffix.

import { InfoIcon } from '@shopify/polaris-icons/dist/svg/InfoIcon.svg?component';

And use it like this:

<Icon source={InfoIcon} />