İkonlar

Olobase Admin çerçevesinde, tüm ikonlar için varsayılan olarak Material Design Icons (mdi) serisinin 7.0.96 versiyonunu kullanılmaktadır. Eğer ikon versiyonunu yükseltmek istiyorsanız tek yapmanız gereken;

npm remove @mdi/font

komutu ile geçerli versiyonu kaldırıp,

npm install @mdi/font --save

komutu ile güncel versiyona yükseltmek. Mdi ikon kütüphanesine aşağıdaki linkten ulaşabilirsiniz.

https://pictogrammers.com/library/mdi/

Material Design Icons

Örnekler

Icons

<template>
  <div>
    <v-card>
      <v-card-text>        
          <v-icon 
            size="large"
            icon="mdi-circle-slice-4"
            class="mb-3"
            color="success"
          >    
          </v-icon>
          <v-divider class="mb-3"></v-divider>
          <v-icon
            size="large"
            color="primary"
            class="mb-3"
            icon="mdi-circle"
          ></v-icon>
          <v-divider class="mb-3"></v-divider>
          <v-btn 
            prepend-icon="mdi-content-save-cog"
            class="mb-3"
            >
          Save
          </v-btn>
          <v-divider class="mb-3"></v-divider>
          <v-btn 
            append-icon="mdi-content-save-cog"
            class="mb-3"
            >
          Save
          </v-btn>
      </v-card-text>
    </v-card>
  </div>
</template>

İkonları navigasyon menü ana linklerde de aşağıdaki örnekte olduğu gibi kullanabilirsiniz.

src/_nav.js

export default  {

  build: async function(t, admin) {

    const user = await admin.can(["user"]);
    const adminUser = await admin.can(["user", "admin"]);

    return [
      {
        icon: "mdi-view-dashboard-outline",
        text: t("menu.dashboard"),
        link: "/dashboard",
      },
      // { divider: true },
    ]
  }
}