Ant バックエンドは左側のメニューのアイコンをカスタマイズします

最終結果:

ステップ

1. Ali Gallery にログインして新しいアイテムを追加します

図に示すように、iconfont-Alibaba ベクターアイコンライブラリ、リソース管理-マイプロジェクト-新しいプロジェクトをクリックします。

プロジェクト名を入力します。プロジェクト名は何気なく入力できます。重要ではありません。

上に示すように、接頭辞とフォントファミリを入力し、icon-msd、msd、この msd がプロジェクトのロゴです。[新規] をクリックします。

2. プロジェクトにアイコンを追加します (アップロードできるのは svg 形式のみであることに注意してください)。約 5 分間の審査があり、審査に合格した後、アップロードして保存し、ローカルにダウンロードできます。

レビューに合格したら、クリックして色を保存し、送信します

圧縮パッケージがダウンロードされます。解凍後は次のようになります。

3. 以下に示すように、プロジェクトコードを入力し、src/components の下に新しい iconfont フォルダーを作成し (他のファイルも使用できます)、上記のファイルを新しく作成した iconfont フォルダーにコピーします。

4. iconfont フォルダーに common.less ファイルを作成します。内容は次のとおりです (以前に入力したアイテム ID、msd は以前に入力したものと同じように記述する必要があります)

/* 引入 icon class 文件 */
@import  "./iconfont.css";

/* 设置使用字体的优先级 anticon 高 */
:global(.anticon) {  /* :global() 是为了覆盖全局class .anticon 的样式 */
  &:before {
    font-family: "icon-msd", "msd" !important;
    /* 默认样式是这样
        font-family: "anticon" !important;
    */
  }
}

5. /src/App.vue ファイルに、先ほど作成した common.less を導入します。

import '@/components/iconfont/common.less'

6. /src/views/system/modules/icon/icons.vue ファイルを見つけて、カスタムアイコンのリストを追加します。

      <a-tab-pane tab="自定义图标" key="7">
              <ul>
                <li v-for="icon in icons.selfIcons" :key="icon">
                  <i :type="icon" :title="icon" @click="chooseIcon(icon)" :class="[{'active':activeIndex === icon}, `msd ${icon}`]"></i>
                </li>
              </ul>
      </a-tab-pane>

const selfIcons = ['icon-msda-shujuzonglan2x','icon-msda-zigongjingaifangkongzhiyin2x','icon-msda-yibaike2x','icon-msda-zigongjingaiyucegongju2x','icon-msda-xitongshezhi2x']

selfIcons の値は、Ali Gallery にアップロードした svg の名前です。Ali Gallery で [Font Class] を選択し、アイコンコードをコピーします。

7. src/components/menu/index.js を見つけて、ファイル内で renderIcon メソッドを見つけて、次のコードを追加します。

      if (icon !== 'none' && icon !== undefined && icon.indexOf('icon-msd')!=-1) {
              let className = "msd " + icon;
              return <i class={className} style='margin-right:8px;'></i>;
      }

msd を前に入力したアイテム ID に変更します。classNameの後のアイテム ID 文字列の後にはスペースが必要です。

8.仕上げ

メニュー管理でメニューアイコンの選択を開くと、カスタムアイコンであるタブページの追加リストがあることがわかります。選択して保存した後、ページを更新して、メニューのアイコンが変更されていることを確認します。カスタムアイコンに。

Ant バックエンドは左側のメニューのアイコンをカスタマイズします

おすすめ