Dynamic icon components
See original GitHub issueIs it possible to dynamically use icons?
I’m using the vitesse template and would previously use something like <Icon :icon="myIconVariable" />
but now it seems like that no longer exists so I was wondering if it is still possible to do something like that.
I tried something like this without much luck
<template>
<component :is="myIconVariable.replace(':', '-')" />
</template>
<script setup>
const myIconVariable = 'mdi:vuejs'
</script>
Issue Analytics
- State:
- Created 3 years ago
- Reactions:3
- Comments:12 (2 by maintainers)
Top Results From Across the Web
Dynamic Icons - Lightning Design System
Dynamic Icons. Share. Lightning Component. HTML/CSS: ...
Read more >React Dynamic Icon Component - CodeSandbox
CodeSandbox is an online editor tailored for web applications.
Read more >lightning:dynamicIcon | Lightning Components Developer Guide
Represents various animated icons with different states. This component requires API version 41.0 and later. A lightning:dynamicIcon component visually displays ...
Read more >Dynamic import of react-icons - Stack Overflow
You have to replace the strings values of your icons in the iconsList array with the Icon component itself. Just change :
Read more >Dynamic SVG Icons Component For React
Dynamic -svg-icons-component. Using this component, you can easily use any number of svg files in your project just with one component.
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Along with autoImport one can achieve even more elegant solution. Use the same IconResolver you used in unplugin components:
Then you don’t need to even import and the above will look like this:
Due to the mechanism of how unplugin-vue-components works, there is no way to infer a component from a dynamic string. (
unplugin-icons
only resolved icons at build time)The workarounds for this is:
Or