彻底解决内网图标加载失败！Vue Pure Admin离线图标配置指南

【免费下载链接】vue-pure-admin 全面ESM+Vue3+Vite+Element-Plus+TypeScript编写的一款后台管理系统（兼容移动端） 项目地址: https://gitcode.com/GitHub_Trending/vu/vue-pure-admin

你是否遇到过后台管理系统部署到内网环境后，图标显示异常的问题？本文将详细介绍Vue Pure Admin项目中离线图标配置的最佳实践，让你轻松解决图标加载难题。读完本文，你将掌握如何配置本地图标组件、使用FontIcon组件以及自定义离线图标集，确保在无网络环境下图标也能正常显示。

离线图标组件概述

Vue Pure Admin提供了两种图标组件：本地图标组件和在线图标组件。本地图标组件适用于离线环境，而在线图标组件需要网络连接。在实际项目中，我们通常会优先使用本地图标组件，以避免因网络问题导致图标加载失败。

本地图标组件主要包括IconifyIconOffline和FontIcon。其中，IconifyIconOffline用于显示离线的Iconify图标，而FontIcon则用于显示自定义的字体图标。这两个组件的实现代码分别位于src/components/ReIcon/src/iconifyIconOffline.vue和src/components/ReIcon/src/iconfont.vue。

配置本地图标组件

要使用本地图标组件，首先需要在项目中导入并注册它们。在src/components/ReIcon/index.ts文件中，我们可以看到以下代码：

import iconifyIconOffline from "./src/iconifyIconOffline";
import fontIcon from "./src/iconfont";

/** 本地图标组件 */
const IconifyIconOffline = iconifyIconOffline;
/** `iconfont`组件 */
const FontIcon = fontIcon;

export { IconifyIconOffline, FontIcon };

这段代码导入了iconifyIconOffline和fontIcon组件，并将它们重命名为IconifyIconOffline和FontIcon后导出。这样，我们就可以在项目的其他地方使用这两个组件了。

使用IconifyIconOffline组件

IconifyIconOffline组件用于显示离线的Iconify图标。要使用这个组件，我们需要先准备离线图标数据。在src/components/ReIcon/data.ts文件中，定义了离线图标集的配置：

export const IconJson = {
  // https://icones.js.org/collections/ep-meta.json
  "ep:": [
    "add-location",
    "aim",
    "alarm-clock",
    // ... 其他图标名称
  ],
  // https://icones.js.org/collections/ri-meta.json
  "ri:": [
    "24-hours-fill",
    "24-hours-line",
    // ... 其他图标名称
  ]
};

这里定义了两个图标集：ep:和ri:，分别对应Element Plus和Remix Icon的图标。每个图标集下面是具体的图标名称列表。

要使用IconifyIconOffline组件显示图标，只需传入图标名称和图标集前缀即可：

<template>
  <IconifyIconOffline icon="ep:add-location" />
  <IconifyIconOffline icon="ri:24-hours-fill" />
</template>

<script setup>
import { IconifyIconOffline } from "@/components/ReIcon";
</script>

使用FontIcon组件

FontIcon组件用于显示自定义的字体图标。要使用这个组件，我们需要先准备字体图标文件。在项目中，字体图标文件位于src/assets/iconfont/目录下，包括以下文件：

• iconfont.css
• iconfont.js
• iconfont.json
• iconfont.ttf
• iconfont.woff
• iconfont.woff2

其中，src/assets/iconfont/iconfont.json文件定义了字体图标的元数据，例如：

{
  "id": "2208059",
  "name": "pure-admin",
  "font_family": "iconfont",
  "css_prefix_text": "pure-iconfont-",
  "description": "pure-admin-iconfont",
  "glyphs": [
    {
      "icon_id": "20594647",
      "name": "Tabs",
      "font_class": "tabs",
      "unicode": "e63e",
      "unicode_decimal": 58942
    },
    // ... 其他图标定义
  ]
}

要使用FontIcon组件显示字体图标，只需传入图标对应的class名称即可：

<template>
  <FontIcon class="pure-iconfont-tabs" />
  <FontIcon class="pure-iconfont-logo" />
</template>

<script setup>
import { FontIcon } from "@/components/ReIcon";
</script>

自定义离线图标集

如果项目中需要使用更多的离线图标，我们可以自定义离线图标集。具体步骤如下：

1. 从Iconify官方网站下载所需的图标集JSON文件。
2. 将下载的JSON文件保存到项目中，例如src/components/ReIcon/json/目录。
3. 在src/components/ReIcon/data.ts文件中导入并注册新的图标集：

import customIcons from "./json/custom-icons.json";

export const IconJson = {
  // ... 已有的图标集
  "custom:": customIcons.icons.map(icon => icon.name),
};

4. 在组件中使用新的图标集：

<template>
  <IconifyIconOffline icon="custom:icon-name" />
</template>

图标选择器组件

为了方便在项目中选择和使用图标，Vue Pure Admin还提供了IconSelect图标选择器组件。这个组件可以在src/components/ReIcon/src/Select.vue文件中找到。使用IconSelect组件，我们可以通过可视化界面选择需要的图标，并获取对应的图标名称。

<template>
  <IconSelect v-model="selectedIcon" />
</template>

<script setup>
import { ref } from "vue";
import { IconSelect } from "@/components/ReIcon";

const selectedIcon = ref("");
</script>

总结与展望

通过本文的介绍，我们了解了Vue Pure Admin项目中离线图标配置的最佳实践。首先，我们概述了离线图标组件的基本概念，然后详细介绍了如何配置和使用IconifyIconOffline和FontIcon组件，最后还介绍了如何自定义离线图标集和使用图标选择器组件。

在实际项目中，我们应该根据具体的需求选择合适的图标组件，并确保图标资源能够在离线环境下正常加载。未来，随着项目的不断发展，我们还可以进一步优化图标加载性能，例如通过按需加载图标资源来减小项目体积。

希望本文能够帮助你解决内网环境下图标加载的问题，让你的后台管理系统更加稳定和可靠。如果你有任何疑问或建议，欢迎在评论区留言讨论。记得点赞、收藏、关注三连，获取更多Vue Pure Admin的使用技巧！

【免费下载链接】vue-pure-admin 全面ESM+Vue3+Vite+Element-Plus+TypeScript编写的一款后台管理系统（兼容移动端） 项目地址: https://gitcode.com/GitHub_Trending/vu/vue-pure-admin