i am trying to integrate Feather icons in vuetify. Has anyone integrated any third party icon sets?
I personally have not done this but Vuetify provides a way for achieving that. See more here: Using custom icons docs. Also, this related question.
You can import and assign an svg to an icon value. The imported svg
should contain only the path without the <svg> wrapper.
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
import myIconSvg from 'myIcon.svg'
Vue.use(Vuetify)
export default new Vuetify({
icons: {
iconfont: 'fa',
values: {
customIconSvg: myIconSvg,
customIconSvgPath: 'M14.989,9.491L6.071,0.537C5.78,0.246,5.308,0.244,5.017,0.535c-0.294,0.29-0.294,0.763-0.003,1.054l8.394,8.428L5.014,18.41c-0.291,0.291-0.291,0.763,0,1.054c0.146,0.146,0.335,0.218,0.527,0.218c0.19,0,0.382-0.073,0.527-0.218l8.918-8.919C15.277,10.254,15.277,9.784,14.989,9.491z',
},
},
})
Related
I added font awesome in inertiajs/vue3 app
as I read here :
Using Font Awesome in Vue 3
So I have package.json :
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^1.2.36",
"#fortawesome/free-solid-svg-icons": "^5.15.4",
"#fortawesome/vue-fontawesome": "^3.0.0-5",
and icons are rendered ok with syntax like :
<font-awesome-icon :icon="['fas', 'phone']" />
But where is library of all available icons for my version?
I tried to show dollar-sign/dollar and failed...
Thanks !
Don't forget to add icons or icon bundles in your main.js or in your ts file depending on how you've set it up.
import { faPhone } from "#fortawesome/free-solid-svg-icons/faAddressBook";
library.add(faPhone);
Make sure you add the import of the icons and then also add the icon to the library. Below you can see entire bunldes of icons being added at once.
import { fas } from '#fortawesome/free-solid-svg-icons'
import { far } from '#fortawesome/free-regular-svg-icons'
import { fab } from '#fortawesome/free-brands-svg-icons'
To see a list of all icons.
I can import fontawesome-icons in app.js:
import {createApp} from 'vue';
import app from "../vue/app";
import {library} from '#fortawesome/fontawesome-svg-core';
import {FontAwesomeIcon} from '#fortawesome/vue-fontawesome';
import {faWrench} from '#fortawesome/free-solid-svg-icons';
library.add(faWrench);
createApp(app)
.component('fa', FontAwesomeIcon)
.mount("#app");
and use them in components like so:
<fa :icon="[ 'fa', 'wrench' ]" size="2x"></fa>
The font-awesome-animation npm doc tells to use this:
<i class="fa fa-wrench faa-wrench animated"></i>
but it doesn't seem to work in Vue 3.
I've tried importing font-awesome-animation after installing it like so:
import {faaWrench} from 'font-awesome-animation';
library.add(faaWrench);
but it breaks the site and the console shows:
Uncaught TypeError: Cannot read properties of undefined (reading 'prefix')
How do I use font-awesome-animation in Vue 3?
font-awesome-animation is just a collection of CSS animation keyframes, defined as global styles. The package does not have any exports, so don't try to import anything from it (which would just be undefined, leading to the error you observed when trying to add it to the icon library).
To use font-awesome-animation from NPM, import its CSS file like this:
// main.js
import 'font-awesome-animation/css/font-awesome-animation.min.css'
Then append the faa-ANIMATION_NAME (where ANIMATION_NAME is one of the animations from the library's animation list) and animated classes to a <font-awesome-icon>. For example, this markup applies the tada animation to the fas-snowman icon:
<font-awesome-icon :icon="['fas', 'snowman']" class="faa-tada animated" />
demo
Hi Im using Nuxt JS for my project and I noticed that my js files are getting rather big
And my question is how can I make it smaller or split vendor or js files that are over 1mb
Also I have seen that font-awesome is also taking a lot of space
How can I remove all of this unecessary libraries and make js files smaller ?
Font awesome is: 200KB
free-solid-svg-icons: 194KB
vendor.app: 1MB
This is how I was able to shave off 1+ MB
First, if you are using nuxt-fontawesome module, remove it. I was not able to figure out how to optimize it, even if I explicitly listed the icons I cared about.
Instead, I created a font-awesome plugin and used the library as mentioned in the README.
font_awesome_icons.js
import Vue from 'vue'
import { library, config } from '#fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '#fortawesome/vue-fontawesome'
import { faGem } from '#fortawesome/free-regular-svg-icons/faGem'
import { faFacebookF } from '#fortawesome/free-brands-svg-icons/faFacebookF'
import { faUser } from '#fortawesome/free-solid-svg-icons/faUser'
library.add(faGem, faFacebookF, faUser)
Vue.component('font-awesome-icon', FontAwesomeIcon)
nuxt-config.js
// ...
plugins: [
{ src: '~/plugins/font_awesome_icons.js', mode: 'client' }
],
// ...
index.vue
<template>
<font-awesome-icon :icon="['fab', 'facebook-f']" />
</template>
<script>
export default {
}
</script>
<style>
</style>
Before
After
My team and I developed a website using VueJS. In one of the pages, we used Vuetify elements such as vue-extension-panels and v-card. During development, we run using npm run dev and everything looks fine. I believe that all dependencies are installed correctly as it appeared fine during development.
Then, we deployed the web with Netlify. After deployment, Vuetify elements do not seem to appear correctly.
Below are the images that compare before and after deployment on Netlify:
Here is the packages.json:
So, it would be great if someone can explain why it is not showing properly or if someone knows netlify compatibility with Vuetify.
Thanks!
You are able to use any library with netlify. When you use $ vue add vuetify to add the dependency, everything should be fine. If you did install it otherwise, make sure to check the following things.
Vuetify is under dependencies in your package.json.
"dependencies": {
"core-js": "^3.4.3",
"vue": "^2.6.10",
"vuetify": "^2.1.0"
}
You correclty include it in your main.js
import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify';
Vue.config.productionTip = false
new Vue({
vuetify,
render: h => h(App)
}).$mount('#app')
vuetify plugin (src/plugins/vuetify.js)
import Vue from 'vue';
import Vuetify from 'vuetify/lib';
Vue.use(Vuetify);
export default new Vuetify({});
You have a vue.config.js
module.exports = {
"transpileDependencies": [
"vuetify"
]
}
I'm using vuetify on my application. The design team create a flat design and I want to change the theme of vuetify to match with mockups
I try to find an option to disable ripple effect easily all over the application but it doesn't exist.
I try to create a component extension to avoid repeating :ripple="false"on each component I use.
I'll take a button component as an example.
<v-btn :ripple="false">My Button</v-btn>
each button on my application need to have ripple=false
My aim is to create a component like this
<my-button>My Button</my-button>
I try to extend v-btn in another component like this.
<template>
<v-btn v-bind="options" :ripple="false"></v-btn>
</template>
<script>
import { VBtn } from 'vuetify';
export default {
name: 'MyButton',
extend: VBtn,
computed: {
options() {
return this.props;
},
},
};
</script>
<style scoped>
I try this way to avoid copy/paste all the props of v-btn.
All solutions that I've tried failed.
You can modify Vue.js components globally even after they've been registered.
In this case, you can simply do this :
const VBtn = Vue.component('VBtn')
VBtn.options.props.ripple.default = false
You can add that in your vuetify.js file before the export default new Vuetify (...) for instance.
- Tested with Vuetify 2.1.14
You can set the complete container to not visible.
.v-ripple__container {
display:none !important;
}
According to Vuetify documentation you can modify the Stylus variables - so you can try to redefine these to your taste, e.g. by setting them to none:
$ripple-animation-transition-in := transform .25s $transition.fast-out-slow-in, opacity .1s $transition.fast-out-slow-in
$ripple-animation-transition-out := opacity .3s $transition.fast-out-slow-in
$ripple-animation-visible-opacity := .15
Override ripple directive with global mixin in main.js
let overrideRipple = {
directives:{
ripple:{
inserted: ()=> {
console.log("Ripple overrided")
}
}
}
}
Vue.mixin(overrideRipple);
With the release of Vuetify 2.0 you can actually just turn off ripples globally by modifying your vuetify.js file like so.
export default new Vuetify({
global: {
ripples: false
},
icons: {
iconfont: 'mdi',
},
});