qing-icon

qing-icon 通过将 SVG 渲染成一个 svg symbols sprites 雪碧图的方式进行渲染 Icon。

原理：将所有的 SVG 文件编译成 SVG Symbols Sprites雪碧图，通过使用 **use** 标签引用该 Symbols Sprites 的ID。达到渲染的目的。

修改：

老版本中，qingIcon 可以通过单个引入源文件的方式已经废弃
修改老版本中的 type，用 name 替代
使用：只能通过 import Icons from '@QCFE/qingicon-react'; 的方式引入图标
颜色修改只能通过 clasName 去修改图标的颜色。

脚本

如果新增svg源文件，打包流程

# 1、执行打包，并修改版本号 npm run build:version -- --release-as [版本号]，例如
npm run build:version 1.1.1
# 2、发布
## 如果前期未登录需要先切换到公司内网镜像源，再登录
npm login
## 登录后发布
npm publish

命令介绍：

# 运行qingicon官网项目
yarn dev
# 或者
npm run dev

# 构建qingicon官网
yarn build:website
# 或者
npm run build:website

# 删除编译文件
yarn build:clean
# 或者
npm run build:clean

# 编译 icon
yarn compiler:icons
# 或者
npm run compiler:icons

# 编译 csv 文件并生成json文件
yarn compiler:csv
# 或者
npm run compiler:csv


# 生成html预览文件
yarn compiler:html
# 或者
npm run compiler:html

# 打包
yarn build:source
# 或者
npm run build:source

# 全流程编译
yarn build
# 或者
npm run build

# 获取 figma数据
yarn fetch
# 或者
npm run fetch

# 发布正式版
yarn release
# 或者
npm run release

实现原理

将所有的svg 编译成一个 .svg 的雪碧图的静态源文件

通过网络请求将静态资源文件内容注入到页面

由于通过网络请求来请求该svg文件，所以需要将组件库内部的静态资源拷贝到各自项目内才能使用。通过 fetch 请求将 .svg静态资源插入到dom里面；代码内默认请求地址为 /static/images/q-icon.x.x.x.svg。如果项目中地址无法使用该地址，也可以自定义该静态资源的请求地址，只需要设置： window.q_icon_path = '/static/icons/q-icon.093730173301.svg'，这样即可访问到项目中的文件。

const { version } = require('../package.json');
export const initSvgDom = (filePath?: string) => {
    if (!window.__init_q_icon_svg__ && !document.getElementById('__SVG_Q_ICON__')) {
        window.__init_q_icon_svg__ = true;
        const url = filePath || window.__q_icon_path__ || `/static/images/qingicon.${version}.svg`;
        fetch(url, { method: 'GET' })
            .then((res) => res.text())
            .then((svg) => {
                if (svg.includes('__SVG_Q_ICON__')) {
                    const dom = document.createElement('div');
                    dom.innerHTML = svg;
                    document.body.appendChild(dom.children[0]);
                } else {
                    window.__init_q_icon_svg__ = false;
                    console.error(new Error('Failed to obtain Icon resource'))
                }
            });
    }
}

创建了一个Icon渲染器的组件，进行渲染编译后的svg

引入 Icons 组件，并传入 name 来匹配svg，渲染

import React from 'react';
import { initSvgDom } from './init';
import { toLowerCase } from './utlis';
require('./styles/index.scss');

initSvgDom();

const idPrefix = 'q-icon';
export type IconProps = React.HTMLAttributes<HTMLSpanElement> & {
name: string;
/** svg 尺寸 */
size?: string | number;
fill?: string | string[];
};
const Icons = (props: IconProps): JSX.Element => {
const { size, name, className, fill, ...extra } = props;
const cls = className ? `${idPrefix} ${className}` : idPrefix;
const width = size || '1em';
const href = name.includes('#') ? name : `#${toLowerCase(name)}`;

    const getStyle = () => {
        if (!fill) return {};
        const color = Array.isArray(fill) ? fill : [fill];
        return {
            color: color[0],
            fill: color[1],
        }
    }

    return (
        <span {...extra} className={cls}>
        <svg className={`qicon-${href.split('#')[1]} qicon-svg`} width={width} height={width} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" style={getStyle()}>
          <use xlinkHref={`${href}`} />
        </svg>
    </span>
    )
}

export default Icons;

qingIcon 使用

把 qingicon 的svg静态资源添加到项目中,具体静态资源路径为 @QCFE/qingicon-react/lib/icons/

原本是想利用 import.meta.url 进行设置当前远程请求的静态资源地址的，可惜 webpack4 不支持，所以现在改为将静态资源放在 console 的静态资源下，并在各自子portal 中也添加相印的svg静态资源。

例如：

项目中改动

修改 weback.base.js，或者开发自己去 copy 该源文件到项目中

const CopyWebpackPlugin = require('copy-webpack-plugin');
const config = {
    plugins: [
        new CopyWebpackPlugin({
            patterns: [
                {
                    from: resolve('node_modules/@QCFE/qingicon-react/lib/icons/'),
                    to: 'static/images',
                },
            ],
        }),
       // 或者
        new CopyPlugin({
            patterns: [
                {
                    context: rootDir,
                    from: 'node_modules/@QCFE/qingicon-react/lib/icons',
                    to: 'static/images',
                },
            ],
        })
    ]
}

设置 qingicon 的请求路径

由于 qingicon 内部设置了默认地址: /static/images/qingicon.${version}.svg, 如果项目中把静态资源 qingicon.svg 放入 /static/images/ 下，且文件名不变的情况下，可以不设置该请求路径。否则需要开发者需要手动定义此路径，设置路径：
```
window.__q_icon_path__ = 'xxxx'; // 定义qingIcon的svg资源路径
```

组件使用

图标引入

由于改造后，文件不再支持单个图标组件引入，只支持引入 Icon 组件使用，且图只有 name、size、className 以及一些 html 标签属性，控制 svg 属性的只有 name、size。

import Icons from '@QCFE/qingicon-react';
const demo = () => {
  return (
      <div>
        <Icons name="ResourceOrchestrationDuotone" />
        <Icons name="resource_orchestration_duotone" />
        <Icons name="resource-orchestration-duotone" />
        <!-- #开头主要处理英文和数字相连的情况 eg:ipv4_duotone (name="#ipv4-duotone")  -->
        <Icons name="#resource-orchestration-duotone" />
        <Icons name="resource-orchestration-duotone" fill="red" />
        <Icons name="resource-orchestration-duotone" fill={['red', 'green']} />
        <Icons name="ResourceOrchestrationDuotone" size={100} />
      </div>
  )
}

修改样式

由于考虑主题定制化， qing-icon 中样式修改只能通过样式修改。
- 全局控制：.qicon-svg，可以定义 fill 和 color 的颜色修改图标的颜色, 该样式默认 fill: #324558。
- 局部控制：通过修改class的颜色，也可以单独传人 fill 去修改icon的颜色

styles.scss

// 修改所有的svg图标颜色
.qicon-svg {
  fill: #324558;
   // color:red;
}
// 修改具体某一个svg颜色， 双色的有两个className
:global .qicon-resource-orchestration-duotone {
  fill: #324558;
}
.ResourceOrchestrationDuotone .qicon-svg {
  fill: #324558;
  color: red;
}

demo.tsx

import Icons from '@QCFE/qingicon-react';
import styles from './styles.scss'
const demo = () => {
  return (
      <div>
        <Icons name="ResourceOrchestrationDuotone" />
        <Icons name="ResourceOrchestrationDuotone" fill={['red', 'green']} />
        <Icons className={styles['ResourceOrchestrationDuotone']} name="ResourceOrchestrationDuotone" size="100" />
      </div>
  )
}

qingicon官网

用于展示所有的icon以及插画集

配置host 172.30.0.5 icon.internal.yunify.com
访问http://icon.internal.yunify.com

icon展示方案

icon基于qingicon项目下的icons来展示的，其原理是根据icons的目录生成对应的json文件，生成脚本为build/build-icons-json.ts
再在项目里引入根据icons生成的雪碧图（脚本为build/build-icons.ts），使用Icons组件在项目中使用根据步骤1生成的json文件来展示

插画

目前的插画只支持复制svg到剪切板，所有的插画svg都放在src/constants/illustration.tsx文件中
其中LargeIllustration，MediumIllustration，SmallIllustration，IconIllustration 分别为大型号，中型号，小型号
图标型插画列表，如果要新增插画，将对应类型的插画放到这几个列表中即可。

@pitrix/qingicon-react

qing-icon

脚本

实现原理

qingIcon 使用

qingicon官网

icon展示方案

插画

Readme

Keywords

Package Sidebar

Install

Weekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

@pitrix/qingicon-react

qing-icon

脚本

实现原理

qingIcon 使用

qingicon官网

icon展示方案

插画

Readme

Keywords

Package Sidebar

Install

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

Weekly Downloads