1. vip3-icon

图标解决方案，支持：

• 扩展了VIP3平台的模块加载器，支持加载SVG图标制作为精灵图（SVG Sprite）。
• 内置两个Vue组件
  • RemixIcon：支持显示图片、Base64编码、SVG、SVG Sprite和Icon Font多种图标
  • AuthImage：支持显示需要授权的才能访问的图片

1.1. 快速开始

安装依赖

npm install @zhoujianhui/vip3-icon

注册组件

import createIcon from "@zhoujianhui/vip3-icon";
import App from "./App";

(async () => {
    // 创建应用
    const app = await createApp(App)

    if (app) {
        // 注册平台图标组件
        const icon = createIcon()
        app.use(icon)
    }
})()

1.2. RemixIcon

<template>
  <remix-icon :icon="assets/icon/xx.jpg|svg|Base64"/>
</template>

icon属性可以是url、相对路径和Base64编码的图片字符串。

注意：相对路径指的是发布后的相对路径，而不是发布前src下的相对路径 ！

1.2.1. 精灵SVG

将 SVG 图标打包成精灵图（sprite）可以减少网络请求次数，从而提升加载速度。 如果将SVG制作成精灵SVG供RemixIcon使用，需要配置 vue.config.js 中对于SVG文件的处理。

 chainWebpack: (config) => {
    // 排除默认SVG规则对于src下SVG文件的处理
    config.module
        .rule("svg")
        .exclude
        .add(path.resolve(__dirname, "src"))
        .end()

    // 自定义规则将SVG文件处理为精灵SVG
    config.module
        .rule("remixIcon")
        .test(/\.svg$/)
        .include
        .add(path.resolve(__dirname, "src/"))
        .use("svg-sprite-loader")
        .loader("svg-sprite-loader")
        .options({symbolId: "ss-[name]"}) // 设置生成图标的 ID 格式
        .end()
}

使用精灵SVG

<template>
  <remix-icon icon="ss-<SVG名称>"/>
</template>

注意：“ss-” 为自定义前缀，你可以通过 symbolId 选项来自定义。

1.2.2. Font字体图标

以awesome font为例

<template>
  <remix-icon icon="fa-solid fa-user"/>
</template>

1.3. AuthImage

如果图片需要授权后才能访问，可以使用 AuthImage 组件。 它会利用VIP3平台内核提供的带认证信息的Axios实例访问配置的需要授权的图片URL，获取并加载图片二进制流。

<template>
  <auth-image :src="<图片URL>"/>
</template>