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

实现原理

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

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

   由于通过网络请求来请求该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'))
                   }
               });
       }
   }

3. 创建了一个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 使用

1. 把 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',
                   },
               ],
           })
       ]
   }
     
     

2. 设置 qingicon 的请求路径

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

   window.__q_icon_path__ = 'xxxx'; // 定义qingIcon的svg资源路径

3. 组件使用

   • 图标引入

     由于改造后，文件不再支持单个图标组件引入，只支持引入 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" />
           <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以及插画集

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

icon展示方案

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

插画

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