-3

I can use @iconify/vue to use iconify in a Vue3 project.

Is it the best way or does it still need optimization?

How can I make it into an import with a small size?

kissu
  • 40,416
  • 14
  • 65
  • 133
radiorz
  • 1,459
  • 4
  • 18
  • 36
  • 1
    what Optimization do you think could be needed - since you haven't even shown how you are using @iconify/vue (i.e. the documentation for @iconify/vue shows several ways to use it) the answer is a pineapple – Bravo May 17 '22 at 04:36

1 Answers1

2

This is by far the best approach right now: https://github.com/antfu/unplugin-icons

Simple, you make the configuration once, you have full customization and flexibility.

Here is a more in depth answer of mine (regarding Nuxt): https://stackoverflow.com/a/72055404/8816585

kissu
  • 40,416
  • 14
  • 65
  • 133
  • I don't like this one too much, because the vscode Iconify intellisense would show icon in the code only on the import... and not for example inline - where – DS_web_developer Nov 12 '22 at 18:07
  • @DS_web_developer give a try to `>Iconify: Toggle In-place Mode` then. – kissu Nov 12 '22 at 18:09
  • maybe you didn't understand... in vs code there is a plugin called Iconify: intellisense... and if I use vue Icon component (@iconify/vue)... I can use it like this and vscode would show me the thermometer icon instead of text: fa:thermometer! But if I would use the unplugin-icons instead, I would see the icon on the import statement: 'import IconThermometer from "~icons/fa/thermometer ";' and not in the markup where I would implement it – DS_web_developer Nov 12 '22 at 19:13
  • @DS_web_developer works perfectly for both on my side. – kissu Nov 12 '22 at 19:44
  • could you paste a screen shot for me somewhere? – DS_web_developer Nov 15 '22 at 12:55
  • @DS_web_developer I guess it would be better that you open a new question actually. Since it's out of the scope of the OP. – kissu Nov 15 '22 at 13:04