iconify图标集离线使用方案简介

1.需求描述

前端项目，技术栈使用Vue3+Element Plus，参考了ruoyi-vue-pro项目与vue-element-plus-admin项目，封装了一个Icon组件，图标使用的是iconify,项目部署在内网环境，不能连接互联网，需要部署一套iconify图标离线环境使用。Icon组件代码如下。

<script lang="ts" setup>
import { propTypes } from '@/utils/propTypes'
import { useDesign } from '@/hooks/web/useDesign'
import { Icon } from '@iconify/vue'

defineOptions({ name: 'Icon' })

const { getPrefixCls } = useDesign()

const prefixCls = getPrefixCls('icon')

const props = defineProps({
  // icon name
  icon: propTypes.string,
  // icon color
  color: propTypes.string,
  // icon size
  size: propTypes.number.def(16),
  // icon svg class
  svgClass: propTypes.string.def('')
})

const isLocal = computed(() => props.icon.startsWith('svg-icon:'))

// const data = computed(() => {
//   return getIcon(props.icon)
// })

const symbolId = computed(() => {
  return unref(isLocal) ? `#icon-${props.icon.split('svg-icon:')[1]}` : props.icon
})

const getIconifyStyle = computed(() => {
  const { color, size } = props
  return {
    fontSize: `${size}px`,
    color
  }
})

const getSvgClass = computed(() => {
  const { svgClass } = props
  return `iconify ${svgClass}`
})
</script>

<template>
  <ElIcon :class="prefixCls" :color="color" :size="size">
    <svg v-if="isLocal" :class="getSvgClass" aria-hidden="true">
      <use :xlink:href="symbolId" />
    </svg>

    <Icon v-else :icon="icon" :style="getIconifyStyle" />
  </ElIcon>
</template>

2.方案设计

iconify有一个项目api，一个用Node.js写的http服务。

下载所有依赖后，把代码部署到内网服务器中，启动服务，利用Nginx做反向代理，暴露此服务，设置项目的iconify地址，使用离线服务。

3.项目iconify地址设置

此设置比较简单。

第一步安装依赖@iconify/vue

npm install --save-dev @iconify/vue

第二步在main.ts中引入并进行地址设置

import { addAPIProvider } from "@iconify/vue";

/**
 * @description IconifyAPI相关配置
 * @see {@link https://docs.iconify.design/api/providers.html}
 */
addAPIProvider("", {
  // 地址为项目实际部署的地址 请自己替换
  resources: ["http://127.0.0.1:8084"],
});

4.api项目部署

项目部署可以docker，可以Nginx反向代理，我选择的是Nginx反向代理。

第一步 拉取代码；

git clone git@github.com:iconify/api.git

第二步 下载依赖；

依赖下载完成后，会多出两个文件夹lib和cache。其中cache是在项目启动后，拉取的图标集缓存。

第三步 部署api项目代码到服务器目录；

第四步 启动服务，配置Nginx反向代理

启动服务直接运行npm run start 就可以，然后在Nginx配置文件中配置反向代理，重启Nginx，搞定。

  server {

	listen     8085;
        server_name      iconify-server;

	location / {
		proxy_pass http://localhost:3000;
	}
    }

 说明：api项目的配置在src/config/中，具体可以查看api readme文档。

5.效果展示

6.总结

本文是在项目部署内网时，图标加载不出来的背景下，自己找解决方案的一个总结。由于一般的项目需要使用的图表是很多的，所以，单个引入离线图标（如下图所示）是解决不了实际问题的。

最后在Pure Admin项目文档以及作者的视频帮助下，部署了离线方案，然后自己加入Nginx方案代理，实现了自己项目的iconify图标集的离线使用。

本文是自己实现方案的一个总结，如有不妥之处，欢迎批评指正。