vue-feather-icons

import { defineComponent, h } from 'vue'; import { ActivityIcon, AirplayIcon, AtSignIcon } from 'vue-feather-icons'; const App = defineComponent({ name: 'IconShowcase', components: { ActivityIcon, AirplayIcon, AtSignIcon, }, template: ` <div id="app" style="font-family: sans-serif; display: flex; flex-direction: column; align-items: center;"> <h1>Vue Feather Icons Example</h1> <div style="display: flex; gap: 20px; font-size: 2em; margin-bottom: 20px;"> <activity-icon size="1.5x" style="color: #007bff;" /> <airplay-icon size="32" style="color: #28a745;" /> <at-sign-icon style="color: #ffc107;" /> </div> <p>Icons adapt to parent font-size by default. You can customize `size` with multiples (e.g., `1.5x`) or pixels (e.g., `32`).</p> <p>This package is designed for Vue 2.x and has not been updated for Vue 3.</p> </div> `, }); // For a typical Vue 2 setup: // new Vue({ // render: h => h(App) // }).$mount('#app'); // For a browser environment or minimal setup, assuming Vue is globally available: // const el = document.createElement('div'); // el.id = 'app'; // document.body.appendChild(el); // new Vue(App).$mount('#app'); // In a modern build setup, you'd typically mount it like this: // import { createApp } from 'vue'; // For Vue 3, this package might not be compatible. // createApp(App).mount('#app');