First Time User Experience

[Josh Habdas]

In total I spent about 20 minutes trying to set-up with a SvelteKit project and ended up just giving up for now. So that was my experience. The whole thing could have gone a lot smoother if:

a) The instructions didn't assume ~ in an import path to just magically work (despite its esoteric meaning)
b) The nomenclature was more consistent re: "collection-id" in readme and the prefix used by iconify
c) There was a Discussion section on this repo so I could ask for help
d) There was an example project to study so it's clear how this is supposed to work
e) In the case of Svelte it's possible to provide a Svelte Adder to set-up quickly

I'm sure the project is awesome. But how can I know if I can't get it set-up?

[Matias Meno]

The docs could be improved for sure, but this project covers lots of frameworks with lots of build tools so it's hard to maintain.

For svelte kit this worked smoothly for me:

• npm i -D unplugin-icons
• npm i -D @iconify/json
• Follow the Svelte Kit and Svelte instructions:
  • Add the Icons({ compiler: 'svelte' }) plugin in svelte.config.js
  • Add the type declaration to global.d.ts if you use typescript
• Import in your component with: import PinIcon from '~icons/ri/map-pin-line'

[Joaquín Sánchez]

@vhscom have you read the readme docs? The answer to your questions:
a) the ~icons: prefix is just another alias for virtual:icons:: you can use the virtual: prefix since you're using svelte/sveltekit.
b) the icon collections comes from another package we wrap (@iconify), so you should check it: about the prefix (i- by default) is to avoid parsing all rules + check if collection/icon exists, you can check @iconify site or Icônes. You can use the full @iconify package, just add as dev dependency @iconify/json or add only the collections you will use: @iconify-json/<collection>.
c) I'll request Anthony to enable discussions here
d) you've an example for almost any major ui/app framework on examples folder/directory
e) you've on readme the way you can configure any major ui/app framework, just check Build Tools and Frameworks

[Josh Habdas]

Just wanted to leave my experience. I hope you found it valueable. Thank you.

[Josh Habdas]

Also, a quick follow-up because I just noticed there were two resposnes:

• The readme suggests @iconify/json is 120mb (32 just now when I checked) which is why I opted to try and install an icon set which caused me a bit of pain due to import issues and the ~ thing (which I still don't recognize nor understand). So I think @enyo hit the nail on the head in that the breadth of the project is so wide it's hard to keep the installation instructions up-to-date.
• I will try and find out more about the virtual:icons bit but a simple callout in the docs with a link to define/descripe it is advisable. As it stands the docs just assume the reader knows what that means and it's dreadfully difficult to search for due to it being a single character without any context.
• Sadly my second attempt on a fresh SvelteKit generated project using the succinct instructions given by @enyo was met with a compiler error attempting to use the icon (though no errors were shown importing it).

@userquin Thanks for working to have Discussions enabled. I hate to clog up the issues with this kind of stuff as it's not a bug or a feature. Also, I did not see the examples directory yesterday. Perhaps because I got tunnel vision and the readme doesn't mention them. Thanks for pointing that out.

[Matias Meno]

Out of curiosity, what was the compiler error you got @vhscom ?

In regards to the iconify lib: I'd just install it since that doesn't affect build size. It's just gonna sit in your node_modules folder.

In regards to the ~icons convention, if I'm not mistaken this is just handled by a vite plugin that will transform the input appropriately and generate the desired component at build time.

[Josh Habdas]

Thanks @enyo your help is much appreciated. I wish I could tell you what the compiler error was but it's actually gone with 1.0.0-next.260 kit version (and the icons work now). So that's good. Note the kit renamed global.d.ts to app.d.ts now and removed the temp wrapper div id="svelte". Minor stuff really and to be expected since the kit is still in beta.

[Josh Habdas]

Okay this works perfectly now. This project is awesome. @userquin fyi about the updates to the structure of SvelteKit above. And thanks so much for dropping me Icônes I'd seen that once a couple years ago but lost the bookmark. It's going to be very handy now. Cheers. 😄

[Yianni C]

New to Svelte, would love some help on getting it setup. I've read the readme docs but still unclear.

I keep getting: Module not found: Error: Can't resolve '~icons/ri/map-pin-line'

global.d.ts

/// <reference types="svelte" />
/// <reference types="unplugin-icons/types/vite" />

svelte.config.js

const sveltePreprocess = require('svelte-preprocess');
const Icons = require('unplugin-icons/svelte');

module.exports = {
    ...
    plugins:[
        Icons({ compiler: 'svelte' })
    ]
};

Can anyone please help?

[Josh Habdas]

Can anyone please help?

Your set-up looks good. Two adjustments are to rename global.d.ts to app.d.ts to match what the latest svelte-create provides and using import in your config file. I tried importing '~icons/ri/map-pin-line' in svelte-headlessui-starter and it worked fine.

I'm guessing you're bumping the same issue I originally had and that was not starting with @iconify/json which gives you access to all icons. Try installing that and then getting the icons working, then making other adjustments to whittle down the number of icons if desired.

You could reference the above linked starter or check out the SvelteKit example in the repo here.

[mvartuc]

I wanna also confirm that it's just genuinely a poorly designed documentation in my opinion. Setting up for me took more than half an hour. It's not stated anywhere that the autoimport functionality doesn't support sveltekit, the Icon prefix thing was very very confusing (I use sveltekit so I shouldn't even see this, you could section this part to only the frameworks that are able to use autoimport). Just wanted to confirm that it's not just @vhscom , I would imagine most people to be very confused on how to set this up.

Just putting this in the docs would make it 10x easier for people to get it running.

Get started with sveltekit

1 - npm i -D unplugin-icons @iconify/json
2 - If you're using typescript, add this to your src/app.d.ts:

// Unplugin icons config
/// <reference types="@sveltejs/kit" />
/// <reference types="unplugin-icons/types/svelte" />
// ~Unplugin icons config

3- Edit the vite.config.ts file like so:

import Icons from 'unplugin-icons/vite';

  plugins: [
// ...
    sveltekit(),
    Icons({
      compiler: 'svelte',
    })
  ]

4- Browse https://icones.js.org/ for available icons and select the unplugin option to copy the import line

Note that you can NOT use the autoimport functionality. Do not try to set up autoimport, you can't use it.