Linux

搭建 YIcon 字体图标管理平台

搭建 YIcon 字体图标管理平台

• Linux • 阅读 16

YIcon 是一个集图标上传、展示和使用于一体的字体图标管理平台，由去哪儿网大前端技术中心 YMFE 团队开发。通过 YIcon 可以对企业或团队内部的图标进行统一管理，并为项目提供统一的图标资源服务。

本文介绍了如何通过 Docker 搭建 YIcon 服务，并完成 MySQL、LDAP 等相关服务的配置，实现 YIcon 的私有化部署。

官方网站：https://ued.qunar.com/yicon/index.html
项目地址：https://github.com/YMFE/yicon

安装 Docker CE 和 Docker Compose

在进行操作之前，需要准备 Docker 环境，操作步骤可前往 https://blog.kobin.cn/blog/system/s2/3768.html 进行查看。

搭建 MySQL 数据库

YIcon 需要使用 MySQL 数据库存储用户、图标、项目及版本等相关数据，因此需要先部署 MySQL 数据库服务。

1、创建目录，用于保存 MySQL 数据。

mkdir -p /opt/mysql/data

2、创建 Docker Compose 配置文件，其中 MYSQL_ROOT_PASSWORD 用于设置 MySQL 数据库的 root 密码，根据实际情况修改。

vi /opt/mysql/compose.yaml
services:
  mysql:
    image: mysql:8.0.45
    command: --default-authentication-plugin=mysql_native_password
    networks:
      - internal
    ports:
      - "3306:3306"
    environment:
      MYSQL_ROOT_PASSWORD: "123456"
    volumes:
      - ./data:/var/lib/mysql:rw
    restart: unless-stopped
networks:
  internal:
    driver: bridge

3、进入 MySQL 配置目录，拉取镜像。

cd /opt/mysql/

docker compose pull

4、启动 MySQL 服务，并查看容器运行状态。

docker compose up -d

# 检查运行状态
docker compose ps

5、进入 MySQL 容器，输入 root 密码登录数据库。

docker compose exec -it mysql mysql -uroot -p

6、创建一个名为 yicon 的数据库，并使用 utf8mb4 字符集。

CREATE DATABASE yicon
  CHARACTER SET utf8mb4
  COLLATE utf8mb4_unicode_ci;

# 验证数据库
SHOW DATABASES;

# 退出 MySQL 客户端
exit

准备 YIcon 服务环境

1、创建 YIcon 工作目录。

mkdir /opt/yicon

2、创建 yicon-builder 修复脚本。YIcon 的初始化工具默认使用已经失效的 npm.taobao.org 镜像，该脚本主要用于修复 YIcon 初始化过程中使用的旧版镜像地址。

vi /opt/yicon/patch-yicon.js
const fs = require('fs');

const file = '/usr/local/lib/node_modules/yicon-builder/lib/command/utils.js';

let content = fs.readFileSync(file, 'utf8');

const target = "params = ['install', '--no-optional'];";

const patch = `
  var npmrcPath = _path2.default.join(targetPath, '.npmrc');
  if (_fs2.default.existsSync(npmrcPath)) {
    var npmrcContent = _fs2.default.readFileSync(npmrcPath, 'utf8');
    npmrcContent = npmrcContent
      .replace(/https:\\/\\/npm\\.taobao\\.org\\/mirrors\\/fsevents\\//g,
        'https://npmmirror.com/mirrors/fsevents/')
      .replace(/https:\\/\\/npm\\.taobao\\.org\\/dist\\/phantomjs/g,
        'https://github.com/Medium/phantomjs/releases/download/v2.1.1')
      .replace(/https:\\/\\/npm\\.taobao\\.org\\/mirrors\\/node-sass/g,
        'https://npmmirror.com/mirrors/node-sass');
    _fs2.default.writeFileSync(npmrcPath, npmrcContent, 'utf8');
    log.info('已修复旧版 npm.taobao.org 镜像配置');
  }
  params = ['install', '--no-optional'];
`;

if (!content.includes('已修复旧版 npm.taobao.org 镜像配置')) {
  if (!content.includes(target)) {
    console.error('Patch 失败：未找到目标代码');
    process.exit(1);
  }
  
  content = content.replace(target, patch);
  
  content = content.replace(
    /https:\/\/registry\.npm\.taobao\.org/g,
    'https://registry.npmmirror.com'
  );
  
  fs.writeFileSync(file, content, 'utf8');
  
  console.log('✓ yicon-builder Patch 成功');
} else {
  console.log('✓ yicon-builder 已经 Patch，无需重复修改');
}

3、创建 Dockerfile 文件。

  • 使用 node 10 作为基础镜像，以满足 YIcon 对旧版 Node.js 环境的依赖；
  • 由于 Debian Buster 官方软件源已经归档，将软件源修改为 Debian Archive；
  • 安装 YIcon 运行过程中需要使用的基础工具，并通过 npmmirror 安装 yicon-builder；
  • 执行前面创建的 Patch 脚本，修复 yicon-builder 中使用的旧版 npm 镜像地址。
vi /opt/yicon/Dockerfile
FROM node:10-buster

RUN sed -i \
    -e 's|deb.debian.org/debian|archive.debian.org/debian|g' \
    -e 's|security.debian.org/debian-security|archive.debian.org/debian-security|g' \
    /etc/apt/sources.list && \
    sed -i '/buster-updates/d' /etc/apt/sources.list && \
    apt-get update -o Acquire::Check-Valid-Until=false && \
    apt-get install -y \
        fontconfig \
        git \
        curl \
    && rm -rf /var/lib/apt/lists/*

RUN npm install -g yicon-builder --registry=https://registry.npmmirror.com

COPY patch-yicon.js /tmp/patch-yicon.js

RUN node /tmp/patch-yicon.js && \
    rm -f /tmp/patch-yicon.js

WORKDIR /app

EXPOSE 3000

CMD ["tail", "-f", "/dev/null"]

4、创建 Docker Compose 配置文件，该配置包含 YIcon 和 OpenLDAP 两个服务。

其中 LDAP 通过环境变量进行初始化配置，根据实际情况修改组织名称、域名及密码。

  • LDAP_ORGANISATION：LDAP 组织名称；
  • LDAP_DOMAIN：LDAP 域名，用于生成 LDAP 的基础 DN；
  • LDAP_ADMIN_PASSWORD：LDAP 管理员 cn=admin 的密码；
  • LDAP_CONFIG_PASSWORD：LDAP 配置管理员的密码，用于管理 LDAP 服务配置。
vi /opt/yicon/compose.yaml
services:
  app:
    build:
      context: .
      dockerfile: Dockerfile
    networks:
      - internal
    ports:
      - "3000:3000"
    volumes:
      - ./data:/app
    depends_on:
      - ldap
    stdin_open: true
    tty: true
    restart: unless-stopped
  ldap:
    image: osixia/openldap:1.5.0
    networks:
      - internal
    volumes:
      - ./ldap/database:/var/lib/ldap
      - ./ldap/config:/etc/ldap/slapd.d
    environment:
      LDAP_ORGANISATION: "KOBIN Teams"
      LDAP_DOMAIN: "kobin.local"
      LDAP_ADMIN_PASSWORD: "123456"
      LDAP_CONFIG_PASSWORD: "123456"
    restart: unless-stopped
networks:
  internal:
    driver: bridge

配置 LDAP 用户认证

YIcon 支持 cas、sso 或 ldap 三种登录认证方式，本文使用 OpenLDAP 为 YIcon 提供用户认证服务。

1、创建 LDAP 初始化目录。

mkdir -p /opt/yicon/ldap/init

2、拉取镜像，并启动 LDAP 服务。

cd /opt/yicon

docker compose pull ldap

docker compose up -d ldap

# 检查运行状态
docker compose ps

3、确认服务正常运行后，进入 LDAP 容器。

docker compose exec ldap bash

4、创建 users 用户组织。

ldapadd -x \
  -H ldap://localhost:389 \
  -D "cn=admin,dc=kobin,dc=local" \
  -w '123456' <<'EOF'
dn: ou=users,dc=kobin,dc=local
objectClass: organizationalUnit
ou: users
EOF

5、创建一个用户名为 admin 的 LDAP 用户。

ldapadd -x \
  -H ldap://localhost:389 \
  -D "cn=admin,dc=kobin,dc=local" \
  -w '123456' <<'EOF'
dn: uid=admin,ou=users,dc=kobin,dc=local
objectClass: top
objectClass: inetOrgPerson
objectClass: posixAccount
cn: admin
sn: admin
uid: admin
uidNumber: 10001
gidNumber: 10001
homeDirectory: /home/admin
userPassword: 123456
EOF

6、验证刚刚创建的 LDAP 用户登录。

ldapwhoami -x \
  -H ldap://localhost:389 \
  -D "uid=admin,ou=users,dc=kobin,dc=local" \
  -w '123456'

# 返回以下内容说明用户创建成功
dn:uid=admin,ou=users,dc=kobin,dc=local

初始化 YIcon 服务

1、进入 YIcon 部署目录，构建镜像，并启动 YIcon 应用服务。

cd /opt/yicon

docker compose build --no-cache

# 启动 YIcon 应用服务
docker compose up -d app

# 检查运行状态
docker compose ps

2、进入 YIcon 容器，检查 Node.js 和 npm 版本。

docker compose exec -it app bash

node -v
npm -v

# 正常情况下，版本应类似如下：
node v10.24.1
npm 6.x

3、执行以下命令启动 YIcon 初始化程序。

yicon init

4、按照提示完成配置，其中数据库配置根据实际情况修改。

? 请输入安装路径: /app
✓ 资源获取成功!
✓ 项目初始化完成
△ 输入数据库配置项，回车接受默认值
? 请输入数据库域名或 IP 地址: 127.0.0.1
? 请输入数据库用户名: root
? 请输入数据库密码: 123456
? 请输入数据库端口号: 3306
? 请输入数据库名称: yicon
? 选择登录类型 3) ldap
◎ 您的数据库配置和日志配置已写入，可以手工修改 /app/config.json 来改变配置
✓ 数据库连接成功
? 是否初始化数据库? Yes
✓ 数据导入成功
? 选择 npm 安装源 3) other
? 请输入指定的 npm 源: https://registry.npmmirror.com
△ 已修复旧版 npm.taobao.org 镜像配置
◎ 在 /app/src 路径下执行命令: npm install --no-optional --registry=https://registry.npmmirror.com
依赖安装中 [========================================] 100%
✓ 构建项目成功!
✓ 项目初始化成功，可以前往 /app/src 目录下执行 ./start.sh 以 3000 端口启动服务
搭建 YIcon 字体图标管理平台

5、进入 YIcon 项目目录，执行启动脚本。

cd /app/src/

./start.sh

6、服务启动后，通过浏览器访问 http://server-ip:3000 ，进入 YIcon 管理页面。

搭建 YIcon 字体图标管理平台

关联 LDAP 登录认证

将 YIcon 关联到 LDAP 服务器，使创建的 LDAP 用户可以用于登录 YIcon 系统。

1、停止当前运行的容器。

cd /opt/yicon

docker compose down

2、编辑 YIcon 配置文件，修改 login 配置。

  • server：LDAP 服务器地址，这里的 ldap 指的是容器服务的名称，无需修改；
  • bindDn：LDAP 管理员账号；
  • baseDn：LDAP 基础目录；
  • bindPassword：LDAP 管理员密码；
  • searchDn：LDAP 用户的搜索路径，{{username}} 会自动替换为登录时输入的用户名。
vi /opt/yicon/data/config.json 
"login": {
  "ssoType": "ldap",
  "server": "ldap://ldap:389",
  "bindDn": "cn=admin",
  "baseDn": "dc=kobin,dc=local",
  "bindPassword": "123456",
  "searchDn": "uid={{username}},ou=users"
}

设置 YIcon 自动启动

修改 Docker Compose 配置，让 YIcon 容器启动后自动运行服务。

1、编辑配置文件， 在 app 服务中添加以下配置。

vi /opt/yicon/compose.yaml 
working_dir: /app/src
command: ./start.sh
搭建 YIcon 字体图标管理平台

2、完成配置后启动服务。

docker compose up -d

3、通过浏览器访问 http://server-ip:3000 ，使用前面创建的 LDAP 用户登录即可。

搭建 YIcon 字体图标管理平台

解决大型 SVG 无法上传的问题

部分 SVG 文件内容较大，超过 YIcon 数据库字段原有的存储长度，上传图标时可能出现「ER_DATA_TOO_LONG: Data too long for column ‘path’ at row 1」错误。

搭建 YIcon 字体图标管理平台

通过将相关字段修改为 LONGTEXT 类型，以支持存储更大的 SVG 内容。

1、进入 MySQL 容器，输入 root 用户密码登录数据库。

cd /opt/mysql

docker compose exec -it mysql mysql -uroot -p

2、切换到 YIcon 数据库。

USE yicon;

3、修改 SVG 缓存字段，将 caches 表中的 svg 字段修改为 LONGTEXT 。

ALTER TABLE caches MODIFY COLUMN svg LONGTEXT;

# 修改完成后，查看字段类型
DESCRIBE caches;
搭建 YIcon 字体图标管理平台

4、修改图标路径字段，将 icons 表中的 path 字段修改为 LONGTEXT 。

ALTER TABLE icons MODIFY COLUMN path LONGTEXT;

# 修改完成后，查看字段类型
DESCRIBE icons;
搭建 YIcon 字体图标管理平台

5、完成以上修改后，YIcon 可以支持存储内容更大的 SVG 文件。

本文为原创文章，著作权归作者所有：来自「KOBIN 技术随笔」作者的原创作品，转载请标明出处。
搭建 YIcon 字体图标管理平台
https://blog.kobin.cn/blog/system/s2/3803.html
赞 (0)
0 0

评论功能升级维护公告

为响应国家网络信息安全合规要求，并进行全面的安全策略升级，本站自即日起暂时关闭博客的评论功能。

在此期间，您将无法发表新的评论，但仍可正常浏览所有历史文章及现有评论。如果您遇到问题需要协助，可以选择在线留言，或者发送邮件到 chen@kobin.cn 。

对于给您带来的不便，深表歉意。感谢您的理解与支持！

KOBIN 技术随笔
2025 年 8 月 26 日