I'm trying to make a iconography with storybook for all the icons in my vue project.
I just want to use icons from font awesome.
My main.ts file looks like:
import { createApp } from 'vue'
import App from './App.vue'
import { library } from '#fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '#fortawesome/vue-fontawesome'
import { faUserSecret } from '#fortawesome/free-solid-svg-icons'
library.add(faUserSecret)
createApp(App)
.component('font-awesome-icon', FontAwesomeIcon)
.mount('#app')
The storybook file (iconography.stories.mdx):
import { Meta, Title, IconGallery, IconItem } from '#storybook/addon-docs/';
import { FontAwesomeIcon } from '#fortawesome/vue-fontawesome'
import { faUserSecret } from '#fortawesome/free-solid-svg-icons'
<Meta title="Design Tokens/Iconography" />
# Iconography
<IconGallery>
<IconItem name="user-secret">
<font-awesome-icon icon="fa-solid fa-user-secret" />
</IconItem>
</IconGallery>
The icon is not showing just a box for it:
You need to setup fontawesome in your storybook preview.js file. There you can add the following:
import { library } from '#fortawesome/fontawesome-svg-core';
import { fas } from '#fortawesome/free-solid-svg-icons';
library.add(fas);
then, your story would look something like this:
import { Meta, Title, IconGallery, IconItem } from '#storybook/addon-docs/';
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome';
<Meta title="Iconography" />
# Iconography
<IconGallery>
<IconItem name="user-secret">
<FontAwesomeIcon icon="user-secret" />
</IconItem>
</IconGallery>
Related
I am trying to use a plugin VueDraggableNext in a project that also used Vuetify. Both plugins have a <draggable> element.
If I use the 'Options' API with Vue, I can use the following method to define which version of <draggable> I want to use:
<script>
....
import { defineComponent } from 'vue'
import { VueDraggableNext } from 'vue-draggable-next'
export default defineComponent({
components: {
draggable: VueDraggableNext,
},
....
....
and it works. But I wish to use the Composition API (it's what I'm used to!) - what is the syntax for defineComponent() in this case? I have tried re-ordering the imports, but to no effect, the vuetify version of <draggable> is always used.
main.js:
import { createApp } from 'vue'
import App from './App.vue'
import { VueDraggableNext } from'vue-draggable-next'
// Vuetify
import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
const vuetify = createVuetify({
components,
directives,
})
import '../assets/main.css'
createApp(App).use(vuetify).use(VueDraggableNext).mount('#app')
and I have tried the following in my vue.js but get error 'components is not defined'.
<script setup>
import { reactive,components} from 'vue'
import { defineComponent } from 'vue'
import { VueDraggableNext } from'vue-draggable-next'
defineComponent(
components = {
draggable: VueDraggableNext }
)
....
....
I've been trying to make this work:
<q-btn flat round icon="logo-linkedin" />
But it does not work at all!
Here's how it looks on ionicons:
<ion-icon name="logo-linkedin"></ion-icon>
Despite having all possible imports in quasar-user-options.js file:
import "./styles/quasar.scss";
import "#quasar/extras/roboto-font/roboto-font.css";
import "#quasar/extras/material-icons/material-icons.css";
import "#quasar/extras/material-icons-outlined/material-icons-outlined.css";
import "#quasar/extras/material-icons-round/material-icons-round.css";
import "#quasar/extras/material-icons-sharp/material-icons-sharp.css";
import "#quasar/extras/fontawesome-v5/fontawesome-v5.css";
import "#quasar/extras/ionicons-v4/ionicons-v4.css";
import "#quasar/extras/mdi-v4/mdi-v4.css";
import "#quasar/extras/eva-icons/eva-icons.css";
import { Notify } from "quasar";
export default {
config: {},
plugins: { Notify },
};
What am I missing?
Okay, thanks to the guys on Discord and Github discussions, this works now:
import "./styles/quasar.scss";
import iconSet from "quasar/icon-set/ionicons-v4";
import "#quasar/extras/ionicons-v4/ionicons-v4.css";
import { Notify } from "quasar";
export default {
config: {
iconSet,
},
plugins: { Notify },
};
then:
<q-btn flat round icon="ion-logo-linkedin" />
I want to connect fa in vue Doing
*************
import { library } from '#fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '#fortawesome/vue-fontawesome'
import { faVuejs } from '#fortawesome/free-brands-svg-icons'
******************
library.add(faVuejs);
Vue.component('font-awesome-icon', FontAwesomeIcon)
************
In component:
<font-awesome-icon :icon="[ 'fab', 'twitter' ]" />
Console error:
Could not find one or more icon(s) {prefix: "fab", iconName: "twitter"}
But, if im use:
<font-awesome-icon :icon="[ 'fab', 'vuejs' ]" />
Working fine ... What's wrong?
You have to import the faTwitter icon, and add it to the library like you're doing with the Vue icon:
import { faTwitter } from '#fortawesome/free-brands-svg-icons'
library.add(faTwitter)
demo
i tried this-
import { library } from '#fortawesome/fontawesome-svg-core'
import { faFacebook } from '#fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '#fortawesome/vue-fontawesome'
library.add(faFacebook)
Vue.component('font-awesome-icon', FontAwesomeIcon)
But apparently there's no faFacebook in free-svg-icons. How to include the facebook icon?
I faced the same problem. Solved with this:
terminal:
npm install --save #fortawesome/free-brands-svg-icons
main.js:
import { faFacebook } from '#fortawesome/free-brands-svg-icons'
library.add(faFacebook)
inside code:
<font-awesome-icon :icon="{ prefix: 'fab', iconName: 'facebook' }"/>
check the fontawesome-free-brands for faFacebookSquare
import { faFacebookSquare, faFacebookMessenger } from '#fortawesome/fontawesome-free-brands';
does that work?
edit
just saw that faFacebookF is available there too, I just missed it
import { faFacebookF } from '#fortawesome/fontawesome-free-brands';
Is there a way to install fontawesome in Vue? I tried few tutorials but they are all useless and do not work or icons are empty or plugin does not render at all!!!! I don't want to import the font by script, I want to install it in my application. I tried this tutorial (https://github.com/FortAwesome/vue-fontawesome) but whatever I did the icons do not render, maybe someone can point me to the solution?
Here is my code but the icons even do not render:
import FontAwesomeIcon from '#fortawesome/vue-fontawesome';
export default {
name: 'App',
components:{FontAwesomeIcon}
}
<template>
<div id="app"><font-awesome-icon icon="spinner" /></div>
</template>
also, I get an error in the console:
Check not find one or more icon(s) {prefix: "fas", iconName:
"spinner"} {}
I think you might be missing some dependencies. Please try
<script>
import fontawesome from "#fortawesome/fontawesome";
import brands from "#fortawesome/fontawesome-free-brands";
// import 1 icon if you just need this one. Otherwise you can import the whole module
import faSpinner from "#fortawesome/fontawesome-free-solid/faSpinner";
import FontAwesomeIcon from "#fortawesome/vue-fontawesome";
fontawesome.library.add(brands, faSpinner);
// or .add(brands, solid) if you need the whole solid style icons library/module
export default {
name: "App",
components: {
FontAwesomeIcon
}
};
</script>
Working example: https://codesandbox.io/s/ov6o0xk23y
Remember to load each icon that you are using. My icons weren't rendering because I forgot to add them to the library.
Template:
<icon icon="lock" />
JS:
import Vue from 'vue';
import { library } from '#fortawesome/fontawesome-svg-core';
import {
// import icons here
faLock,
} from '#fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '#fortawesome/vue-fontawesome';
import App from './App.vue';
// add icons to library here
library.add(faLock);
Vue.component('icon', FontAwesomeIcon);
Vue.config.productionTip = false;
new Vue({
render: h => h(App),
}).$mount('#app');
Also, in the case that you are using multiple icons, it can be easier to import and load the whole set of icons e.g.
...
import { fas } from "#fortawesome/free-solid-svg-icons";
library.add(fas);
...
I had the same issue with:
package.json
"#fortawesome/fontawesome-svg-core": "^1.2.36",
"#fortawesome/free-brands-svg-icons": "^5.15.4",
"#fortawesome/free-solid-svg-icons": "^5.15.4",
"#fortawesome/vue-fontawesome": "^2.0.2",
Relying on a previous project where it worked, I upgraded #fortawesome/vue-fontawesome to ^3.0.0-4, which fixed the issue for me.
I was getting the following warning and not getting the icons displayed:
"export 'default' (imported as 'FontAwesomeIcon') was not found in '#fortawesome/vue-fontawesome'
Solution for me was to import an specific portion instead of going to default
changed from:
import FontAwesomeIcon from '#fortawesome/vue-fontawesome'
to
import { FontAwesomeIcon } from '#fortawesome/vue-fontawesome'