I want to know how to properly use vuetify components that itself use icons with #mdi/js.
My vuetify config looks like this:
vuetify: {
iconfont: 'mdiSvg',
defaultAssets: false,
...
}
Just importing the icons and overriding them in the v-checkbox works, but I don't want to do that with every v-checkbox I use:
<template>
<v-checkbox
v-model="checkboxModel"
:indeterminate-icon="mdiCheckboxMarkedOutline"
:on-icon="mdiCheckboxMarked"
:off-icon="mdiCheckboxBlankOutline"
:label="Checkbox"
></v-checkbox>
</template>
<script>
import {
mdiCheckboxBlankOutline,
mdiCheckboxMarked,
mdiCheckboxMarkedOutline,
} from '#mdi/js'
export default {
data() {
return {
checkboxModel: false,
mdiCheckboxBlankOutline,
mdiCheckboxMarked,
mdiCheckboxMarkedOutline,
}
},
}
</script>
The other way would be to overide the $checkboxOff SASS variable.
In node_modules/vuetify/dist/vuetify.js I found the declatation of the variable.
checkboxOff: 'M19,3H5C3.89,3 3,3.89 3,5V19C3,20.1 3.9,21 5,21H19C20.1,21 21,20.1 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z',
This is the actual svg path of the icon (just paste it in there https://yqnn.github.io/svg-path-editor/ to see it). So I tried to override it in 'variable.scss' but with no success.
What am I missing?
https://vuetifyjs.com/en/features/icon-fonts/#using-custom-icons
If you want to specify your own icons that should be used all the time, you have to configure the 'values' option of your vuetify config during installation.
import {
mdiCheckboxBlankOutline,
mdiCheckboxMarked,
mdiCheckboxMarkedOutline,
} from '#mdi/js'
// vuetify options:
{
iconfont: 'mdiSvg',
defaultAssets: false,
values: {
checkboxOn: mdiCheckboxMarked,
checkboxOff: mdiCheckboxBlankOutline,
checkboxIndeterminate: mdiCheckboxMarkedOutline,
}
}
Actually the problam was my wrong config. Thats how it has to be
vuetify: {
icons: {
iconfont: 'mdiSvg',
}
...
}
Related
I would like to use my custom svg as a v-icon but I don't find any solutions in the Vuetify v3 documentation.
In the vuetify v2, I can do this kind of things in my vuetify.js:
export default new Vuetify({
icons:{
values: {
test: {
component: Test,
},
And I can use this like this:
<v-icon size="40">$vuetify.icons.test</v-icon>
How I can do the same thing in Vuetify v3 ? Thanks for your help :)
Below code shows an example of adding a custom icon along with the mdi set of icons to Vuetify and using both in a component via aliases.
vuetify.js
import { createVuetify } from 'vuetify'
import { aliases, mdi } from 'vuetify/iconsets/mdi-svg'
import folder from '#/customIcons/folderIcon.vue'
const aliasesCustom = {
...aliases,
folder,
}
export const vuetify = createVuetify({
icons: {
defaultSet: 'mdi',
aliases: {
...aliasesCustom
},
sets: {
mdi,
},
},
})
folderIcon.vue (your custom icon)
<template>
<svg>...</svg>
</template>
any SFC
<template>
<v-icon>$folder</v-icon>
<v-icon>$mdiGithub</v-icon>
</template>
Original source: this thread in the Vuetify discord channel
i'm new to vue js an wanted to write a fancy little demo.
I was trying to use tailwindcss in a new project.
I've created the project with
vue create vue-tailwind-template
and added tailwind with
vue add tailwind
I removed the demo component "helloworld" an all styles. In App.vue i try to use an div with class "bg-red", but no red background in output. These are my project files. Does anybody see the problem? Thank you in advance.
Sven
postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {}
}
}
tailwind.config.js
module.exports = {
purge: [],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
App.vue
<template>
<img alt="Vue logo" src="./assets/logo.png">
<div class="bg-red"><p>Hallo</p></div>
</template>
<script>
export default {
name: 'App',
components: {
}
}
</script>
<style>
</style>
main.js
import { createApp } from 'vue'
import App from './App.vue'
import './assets/tailwind.css'
createApp(App).mount('#app')
Problem solved.
Classname "bg-red" doesn't exist. I had to use a number to define color intensity, e.g. "bg-red-500"
I want to use the MaterialDesignIcons (https://materialdesignicons.com/) with my vue project. What is the proper way of using these icons with my project? I tried the following but got errors....
yarn add #mdi/font
then in my vue file
<template>
...
<mdiLock />
...
</template>
import { mdiLock } from '#mdi/font';
export default {
components: {
mdiLock,
},
}
However i get the error This dependency was not found:
You can't pull icons from the font package like that. You probably want to be using #mdi/js.
We provide a Vue icon component to make this easy.
Here is a single file component example:
<template>
<svg-icon type="mdi" :path="path"></svg-icon>
</template>
<script>
import SvgIcon from '#jamescoyle/vue-icon'
import { mdiAccount } from '#mdi/js'
export default {
name: "my-cool-component",
components: {
SvgIcon
},
data() {
return {
path: mdiAccount,
}
}
}
</script>
Using Vuetify 2 and Storybook 6 (source https://github.com/lydonchandra/vuetify2storybook6 )
The component renders fine, but keep getting this error TypeError because vm.$vuetify.icons is undefined, when rendering component for first time.
Not sure which storybook-vuetify initialization bridge did I miss ?
TypeError: Cannot read property 'component' of undefined
at remapInternalIcon (vuetify.js:44048)
at VueComponent.getIcon (vuetify.js:16881)
at Proxy.render (vuetify.js:17009)
at VueComponent.Vue._render (vue.esm.js:3557)
at VueComponent.updateComponent (vue.esm.js:4075)
at Watcher.get (vue.esm.js:4488)
at new Watcher (vue.esm.js:4477)
function remapInternalIcon(vm, iconName) {
// Look for custom component in the configuration
var component = vm.$vuetify.icons.component; // <-- issue here when rendering for first time
if (iconName.startsWith('$')) {
// Get the target icon name
src/plugins/vuetify.ts
import Vue from "vue";
import Vuetify from "vuetify/lib";
import { UserVuetifyPreset } from "vuetify";
Vue.use(Vuetify);
export const options: UserVuetifyPreset = {
icons: {
iconfont: "mdiSvg"
}
};
export default new Vuetify(options);
Workaround for now is to set addon-essentials.docs to false. (Ref.
https://github.com/storybookjs/storybook/issues/7593)
file: .storybook/main.js
...
"addons": [
"#storybook/addon-links",
{
name: "#storybook/addon-essentials",
options: {
docs: false
}
}
],
...
If you don't want to disable addon-essentials.docs, you can add the following style in .storybook/preview-head.html
<style>
.sb-errordisplay {
display: none !important;
}
</style>
Another workaround without having to disable addon-essentials or adding any styles in the preview-head.html file you can import Vuetify at the top of your .stories.js (or .stories.ts) file like so e.g.
import vuetify from '#/plugins/vuetify'
then when you declare your storybook Template, pass in your vuetify object
const Template = (args, { argTypes }) => ({
props: Object.keys(argTypes),
components: { YourComponent },
vuetify, // <-- Very important line
template: `<YourComponent />`
})
I found this workaround in this thread Cannot read property 'mobile' of undefined - Vue/Vuetify/Storybook
Following the documentation here:
https://next.vuetifyjs.com/en/customization/icons
I setup my project exactly as described.
Expected:
seeing an <svg> tag.
Actual:
I see an <i> tag (which causes issues with some settings on IE)
Here is a link to a reproduction:
https://codesandbox.io/embed/dialog-vuetify-bhs76
This is the way I've been doing it. If you want, you can also set custom names for icons - which is very useful if you decide to change which icons you use:
import Vue from 'vue';
import Vuetify from 'vuetify/lib';
import {
mdiDelete
} from '#mdi/js';
Vue.use(Vuetify);
export default new Vuetify({
icons: {
iconfont: 'mdiSvg',
values: {
mdiDelete,
// or give it a custom name:
delete: mdiDelete,
}
},
});
Then in your v-icon component:
<v-icon>$mdiDelete</v-icon>
<v-icon>$delete</v-icon>
you should install the right icon library from the vuetify site
then import it on the vuetify plugin folder
export default new Vuetify({
icons: {
iconfont: 'mdiSvg', // 'mdi' || 'mdiSvg' || 'md' || 'fa' || 'fa4' || 'faSvg'
},
})
least and last you should use the icon on the component
<template>
<div>
<v-icon>{{mdiMenu}}</v-icon>
</div>
</template>
<script>
import { mdiMenu } from '#mdi/js';
export default {
data() {
return {
mdiMenu
};
}
};
</script>
you can find icons on this material design site