logue / vite-vue2-vuetify-ts-starter

@vitejs template for @vuejs 2+@vuetifyjs+TypeScript
MIT License
84 stars 31 forks source link

Using custom icons #7

Open MinorFourChord opened 1 year ago

MinorFourChord commented 1 year ago

Any ideas on how to use custom icons? The documentation under icons/fonts for Vuetify doesn't seem to work with this example

Vuetify Icons/Fonts Docs

` import Vue from "vue"; import { UserVuetifyPreset } from "vuetify"; import Vuetify from "vuetify/lib"; import "@mdi/font/css/materialdesignicons.css"; import { VuetifyIcons } from "vuetify/types/services/icons";

Vue.use(Vuetify);

export const options: Partial = { theme: { themes: { light: { primary: "#0F62FE", secondary: "#393939", accent: "#0F62FE", error: "#DA1E28", info: "#0443CE", success: "#198038", warning: "#F1C21B", warningOrange: "#FC832C", }, }, }, icons: { values: vuetifyToCarbon, // custom icons here iconfont: "mdi", }, };

export default new Vuetify(options); `

Specifically trying to use carbon icons - "@carbon/icons-vue": "^10.40.0"

logue commented 1 year ago

What is vuetifyToCarbon?

This question looks like a question about Vuetify itself rather than a question about this template. It's better to ask questions on the official issue or Discord.

I think you should at least include the following lines:

import { CarbonIconsVue } from '@carbon/icons-vue';
ngjuping commented 1 year ago

You could use material design icons with Vuetify <v-icon> component. Here's a list of it: https://materialdesignicons.com/ Example usage: <v-icon>mdi-code-tags</v-icon>

AndrianBalanescu commented 1 year ago

This is the only thing you'll ever need. Ready to import as (vue,react) component, or svg or as css class background image. https://icones.js.org/collection/all?s=flo