How to i use icons in vue 3

[yvza]

Overview of the problem

Oruga version: ^0.2.2 Vuejs version: ^3.0.0 OS/Browser: Sidekick Browser

Description

Steps to reproduce

according to docs: https://oruga.io/components/Icon.html#examples and https://github.com/oruga-ui/oruga/blob/master/packages/oruga-tailwindcss/src/main.ts

its example not related with vue 3 anymore. so how i set the icons correctly in vue 3?

Expected behavior

icons shows up

Actual behavior

icons not rendered

[jtommy]

Icon components works in the same way, please add codepen or similar

[bagaskarala]

how to install the icon, because the icon doesnt show up

[jtommy]

You have to import the icon pack they you prefer and configure it as you can see the icon example docs

[NathanVG]

I am having the same issue, and it is not clear to me from the docs what I should import and where.

[jtommy]

@NathanVG it depends on icon pack that you need

[NathanVG]

I just want to use the default mdi icons, do I need to install it and add it to my vue app in main?

[jtommy]

@NathanVG yes

[NathanVG]

What am I doing wrong here, because it's still not working.

import { createApp } from 'vue';
import App from './App.vue';

import router from './router';
import { createPinia } from 'pinia';

import 'virtual:windi.css';
import './assets/index.css';

import { Autocomplete } from '@oruga-ui/oruga-next';
import '@oruga-ui/oruga-next/dist/oruga-full.css';

import { library } from '@fortawesome/fontawesome-svg-core';
import { faCaretDown } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';

library.add(faCaretDown);

const app = createApp(App);

app.use(router);

app.use(createPinia());

app.component('VueFontawesome', FontAwesomeIcon);

app.use(Autocomplete, {
  iconComponent: 'vue-fontawesome',
  iconPack: 'fas',
});

app.mount('#app');

<o-autocomplete
        rounded
        v-model="searchInput"
        icon-right="faCaretDown"
        placeholder="Select a company"
        :open-on-focus="true"
        :data="filteredCompanies"
        field="name"
        @select="(option) => (selectedCompany = option)"
      >

[jtommy]

@NathanVG you are using FontAwesome and not mdi. Anyway icon-right is the original icon name ->icon-right="fa-caret-down"

[NathanVG]

Yes I changed it because I thought the issue was with mdi. It's still not working though, am I missing an import somewhere or something?

[jtommy]

@NathanVG plese provide your code using codesandbox

[diwic]

In case it helps anyone, this is working for me (with font awesome + vue 2) :

import { library, dom } from '@fortawesome/fontawesome-svg-core';
import { faAngleLeft, faAngleRight, faCaretUp, faCaretDown } from '@fortawesome/free-solid-svg-icons';
library.add(faAngleLeft, faAngleRight, faCaretUp, faCaretDown);
dom.watch();

By using dom.watch, fontawesome-svg-core automatically translates oruga's i tag to svg. I'm not sure how to make this work with mdi though.

[jtommy]

@diwic ok, good solution. Also you can use Vue Font Awesome component and define it in the global config as described below

[diwic]

@jtommy So I think what's missing from the docs is the quickest and/or best way to get mdi up and running. I'm not sure whether to import @mdi/js, @mdi/svg, vue-material-design-icons, or something else?

[jtommy]

You can create a your component that wraps the icon pack that you prefer

[Pablolgn]

The answer of diwic work for me if i pass the pack fas to o-icon, but on other components like notification, the pack default is mdi.

[jtommy]

@Pablolgn can you reproduce on codesandbox?

[Pablolgn]

https://codesandbox.io/s/determined-tree-0w3no?file=/src/main.ts

[diwic]

@Pablolgn Have you specified iconPack="fas" on the notification component?

[Pablolgn]

Oh it's true, I didn't see it. Thx. But there is no way to set it by default in all components, because for example i can't see close icon on notifications.

[diwic]

@Pablolgn According to the source code it seems like iconPack controls the closeIcon as well.

[Pablolgn]

@diwic Im probing and close icon is still class="mdi mdi-times"

[jtommy]

@Pablolgn you have to import Vue Font awesome component and add it to you Vue instance

[Pablolgn]

@jtommy I just try and still nothing change

import { createApp } from 'vue'

import '@oruga-ui/oruga-next/dist/oruga-full.css'
import Oruga from '@oruga-ui/oruga-next'

import { library, dom } from '@fortawesome/fontawesome-svg-core'
import { fas } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

import App from './App.vue'
import './styles/index.sass'

library.add(fas)
dom.watch()

createApp(App)
  .component('VueFontawesome', FontAwesomeIcon)
  .use(Oruga, {
    iconComponent: 'vue-fontawesome',
    iconPack: 'fas',
  })
  .mount('#app')

that is the main.ts

[diwic]

Hi,

It seems like one needs to create a custom component to interface oruga with mdi. So I've made a quick example to show how this can work. The repository is here: https://github.com/diwic/oruga-mdi-example

And here's the most relevant piece of code (main.js)

// Add icons as needed here
import {mdiBabyFace} from './node_modules/@mdi/js/mdi.js';
const knownIcons = {mdiBabyFace};

Vue.component('mdi-icons', {
    props: ['icon', 'size'],
    template: '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" '+
        ':width="sizeNum" :height="sizeNum" viewBox="0 0 24 24"><path :d="path" fill="currentColor" /></svg>',
    data() { return {}},
    computed: {
        sizeNum() { return (this.size || 24).replace(/(mdi-|px)/g, ''); },
        path() {
            const z = Array.isArray(this.icon) ? this.icon : [this.icon];
            for (const x of z) {
                // Convert kebab-case to camelCase
                const s = x.replace(/-./g, y => y[1].toUpperCase());
                if (knownIcons[s])
                    return knownIcons[s];
            }
            return "";
        }
    }
});

One then needs to point oruga to this component, e g like this:

const options = {iconComponent: 'mdi-icons', iconPack: 'mdi'};
const app = new Vue({
    el: '#app',
    created() {
        this.$oruga.config.setOptions(options);
    }
})

[jtommy]

@diwic in the future we might create a new package/repository as add-on with custom icon components 😃 A concept similar to theme-bulma

[dsciamma]

Would it be possible to have a example how to use mdi icons with Oruga in Nuxt?

[jtommy]

@dsciamma same way of above example

[dsciamma]

OK. Sorry, I though it would be more direct.

[jtommy]

@dsciamma it depends.. using CSS icon pack you should be already ready as is

[BuffMcBigHuge]

For those who may come across this thread as I did:

$ npm i --save @fortawesome/vue-fontawesome@prerelease

import { createApp } from "vue";
import App from "./App.vue";

import Oruga from "@oruga-ui/oruga-next";
import { bulmaConfig } from "@oruga-ui/theme-bulma";

import "@oruga-ui/theme-bulma/dist/bulma.css";

import { library } from "@fortawesome/fontawesome-svg-core";
import { fas } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";

library.add(fas);

createApp(App)
  .component("VueFontawesome", FontAwesomeIcon)
  .use(Oruga, {
    ...bulmaConfig,
    iconPack: 'fas',
    iconComponent: 'vue-fontawesome'
  })
  .mount("#app");

[luisdoniad]

If you want to use default mdi: npm install @mdi/font @import '@mdi/font/css/materialdesignicons.min.css';