antfu / icones

⚡️ Icon Explorer with Instant searching, powered by Iconify

Home Page:https://icones.js.org

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

When in use with unplugin-icons, I only need the name of the component like 'MdiLightAlarmPlus'

Bobakanoosh opened this issue · comments

When using unplugin-icons, my flow is:

  1. Find an icon on icones
  2. Click "Vue" under the components section
  3. Paste the copied component into my editor
  4. Copy the component name from the snippet's export
  5. Then use it like a component <MdiLightAlarmPlus/>

Ideal flow would be:

  1. Find an icon
  2. Click a button that copies the text MdiLightAlarmPlus
  3. Use it like a component

I'm open to making a PR for this, just wanted to ask before doing so to see if there would be a preferred implementation for it.

Yeah, that is also a thing I want for a while. Ideally, I think we could have a panel of setting to configure copying to different formats. For example

  • Iconify: mdi:light-alarm-plus
  • Dash: mdi-light-alarm-plus
  • Without Prefix: light-alarm-plus
  • Pascal case: MdiLightAlarmPlus
  • UnoCSS: i-mdi-light-alarm-plus

PR would be greatly welcome, thanks!

My qualms with it being a setting is that if you're context switching between several projects throughout the day that use different versions, now you have to consistently change that setting.

What about a dropdown arrow next to the current copy button:
image

That when clicked, opens a menu that shows each of those options, and then clicking them just copies that version.

That's a good idea. We could also persist the user choice for multiple copying with same format

I will work on it

What about the import path for unplugin-icon when not using auto-import e.g. ~icons/mdi/abjad-arabic? 🙈