tencent / tdesign-icons Goto Github PK

这个功能解决了什么问题

无

你建议的方案是什么

建议开发github等有名平台图标和开发语言类图标

这个功能解决了什么问题

从工蜂同步过来 rtx sevencai

希望能增加跟rollback相反反向的图标icon，用于撤回和重做。

你建议的方案是什么

增加跟rollback相反反向的图标ico

tdesign 版本

"@tencent/tdesign-icons-vue": "0.0.4",     "@tencent/tdesign-vue": "0.27.2",

重现链接

No response

重现步骤

使用https://zeroing.jd.com/的微前端框架接入微前端，加载tdesign.gtimg.com资源跨域了
Access to fetch at 'https://tdesign.gtimg.com/icon/0.1.3/fonts/index.js' from origin 'https://my.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

期望结果

No response

实际结果

No response

框架版本

No response

浏览器版本

No response

系统版本

No response

Node版本

No response

补充说明

No response

这个功能解决了什么问题

自定义渲染内容

你建议的方案是什么

传入SVG，直接渲染

import { Icon } from 'tdesign-icons-react';
const svg = <Svg />
const Com = () => <Icon conponent={svg} />

tdesign-icons 版本

0.1.11

重现链接

none

重现步骤

1. 在项目中 import tdesign-icons-vue-next/esm/index.js
2. 启动 vite dev server
3. chrome devtools 观察网络请求 或 项目中的 node_modules/.vite/deps 文件夹
4. 有大量的 icon chunk 文件

相同的问题 Tencent/tdesign-vue-next#3079

期望结果

被正确的 bundle 为一个文件

实际结果

错误的 splitting 有大量的 icon chunk 文件

框架版本

No response

浏览器版本

No response

系统版本

No response

Node版本

No response

补充说明

导致该问题的提交 #52

import('./components/${stem}')

会让 esbuild 认为是动态导入，进行 splitting

目前TDesign的iconfont CDN资源与TDesign其他资源在一个COS，这样有会潜在的风险，如果TDesign本身的COS出现一些问题，会直接影响使用TDesign iconfont资源的用户，所以需要一个更合适的资源地址。

tdesign-vue-next 版本

1.8.0

问题

在micro-app、wujie微前端环境下（qiankun未测试）

使用t-icon、iconfont和icon组件进行图标渲染，都会发起网络请求，这个网络请求的问题在微前端环境下因其实现流程会出现问题

经过排查发现是上述的图标组件渲染行为在micro-app环境下的的问题，生成svg精灵图 script 标签被插入了多次，导致生成了多个巨大的svg精灵图。

原因

微前端环境下，子应用生成的script会被拦截，不会放到子应用的body中，而是放到沙箱中执行，所以图标组件判断这个生成svg精灵图的 script 标签是否存在时，会一直判断为找不到。第10行

另外，微前端框架中，对子应用的 insertAdjacentHTML 方法没有进行代理或拦截等处理，所以这个子应用里的script执行该方法插入svg精灵图时会把HTML内容插入到基座应用的body中 ，插入位置不符合预期

所以，子应用页面上使用了多个图标组件，导致每一个图标组件都会生成一个 script 和 全量图标的svg精灵图。（我运行的项目首页使用了多个图标，正常情况下渲染5000+个dom节点，在微前端环境下生成了90000+个节点）

建议

目前的解决：在子应用的index.html中body内写死这个 script ，那么在图标组件挂载时找这个 script 时就会判断已经存在

<script class="t-svg-js-stylesheet--unique-class" ignore="true" src="https://tdesign.gtimg.com/icon/0.2.0/fonts/index.js"></script>

但弊端是发现这个src的目标地址是附带图标组件的版本号的，如果日后组件库版本更新时更改了类名或者src的url，导致Icon组件内这个查询这个script是否存在时判断为无，导致又出现了上述问题，所以还需建议组件修改实现流程。

1. script内插入svg精灵图时代码确保插入到了子应用中 原script代码

   var svgCode = '<svg></svg>' // svg精灵图代码
   /*
   if (document.body) {
       document.body.insertAdjacentHTML('afterbegin', svgCode);
   } else {
       document.addEventListener('DOMContentLoaded', function () {
           document.body.insertAdjacentHTML('afterbegin', svgCode);
       });
   }
   */
   var svg = document.createRange().createContextualFragment(svgCode).children[0]; // 预先生成svg节点，为了使用插入节点的方法
   if (document.body) {
       document.body.appendChild(svg);
   } else {
       document.addEventListener('DOMContentLoaded', function () {
           document.body.appendChild(svg);
       });
   }

   • 为了使用已经被微前端框架进行代理后的常见的插入节点方法，如insertBefore、appendChild，先把svg精灵图的html代码生成为一个svg节点后在插入到子应用的body中
   • 原本的 insertAdjacentHTML 会把精灵图作为body的第一个子节点插入，此处使用 appendChild 的原因是微前端框架对子应用的firstchild未进行拦截处理(代价大)，所以这行代码 document.body.insertBefore(svg, document.body.firstchild) 实际上也是插入到子应用body的末端，因为 document.body.firstchild 返回的是基座应用的第一个字节的。
   • svg精灵图插入的位置在body顶部和尾部貌似都能正常使用？

2. 因为上述步骤确保svg精灵图正确插入到子应用的body中了，Icon 组件判断生成svg精灵图是否存在时，可把对 script 的查找更改为对svg查找（给svg精灵图加上一个类名或id），就能避免子应用的 script 被沙箱转移位置导致body中找不到的问题 第10行

这个功能解决了什么问题

减少因为网络问题导致t-icon语法糖不可用或不稳定的反馈

你建议的方案是什么

t-icon 默认使用 svgsprite 并加入包内 规避网络问题

tdesign-vue-next 版本

1.3.12

重现链接

无

重现步骤

1. 在无公网环境使用
2. TDesign 添加的一行 script 出现一个请求错误

<script class="t-svg-js-stylesheet--unique-class" src="https://tdesign.gtimg.com/icon/0.1.4/fonts/index.js"></script> 

期望结果

希望能有一个配置，不要添加这个script

实际结果

该script 无法取消

框架版本

3.3.4

浏览器版本

No response

系统版本

No response

Node版本

No response

补充说明

No response

这个功能解决了什么问题

在一个客户端应用中，很多时候会有放大、退出放大这个功能（详见右上角），在已有 icon 中存在 rectangle 这一个放大功能的 icon，却难找到一个常规的退出放大的 icon（两个方形叠放的效果？可见 window 应用右上角的放大和退出放大），我希望能保持 icon 风格一致（个人项目，莫得UI，不会画图），又希望不为了这一个图标而为项目增加更多的依赖负担。

你建议的方案是什么

我感觉这个 icon 属于客户端应用开发中非常容易会被使用到的 icon，希望能够添加这一个 icon 以满足需求（tdesign-icons-vue-next）。。。不知道这个希望会不会显得不太合适

这个功能解决了什么问题

checkbox 正方形图标的 uncheck 状态缺失：

应该是一个正方形？

你建议的方案是什么

新增图标

Hello!

I hope you are doing well!

We are a security research team. Our tool automatically detected a vulnerability in this repository. We want to disclose it responsibly. GitHub has a feature called Private vulnerability reporting, which enables security research to privately disclose a vulnerability. Unfortunately, it is not enabled for this repository.

Can you enable it, so that we can report it?

Thanks in advance!

PS: you can read about how to enable private vulnerability reporting here: https://docs.github.com/en/code-security/security-advisories/repository-security-advisories/configuring-private-vulnerability-reporting-for-a-repository

这个功能解决了什么问题

在将组件 web component 化后（开启 Shadow DOM），发现svg无法显示。

你建议的方案是什么

支持 svg symbol 自定义挂载位置。

这个功能解决了什么问题

新增格式刷和橡皮擦图标

你建议的方案是什么

新增格式刷和橡皮擦图标

tdesign-vue-next 版本

0.17.3

重现链接

No response

重现步骤

可以传入 url 加入新的 iconfont 图标。

引入新的图标 Url 之后，图标名称必须写全称，以作区分，如："name='home'" 需要写成 "name='t-icon-home'"。

组件会引入默认的 iconfont 图标，如果希望禁止组件加载默认的 iconfont 图标，将 loadDefaultIcons 置为 false 即可。

点击下面 demo 的 stackblitz 链接即可复线

期望结果

显示新的 iconfont 图标

实际结果

并未显示新的 iconfont 图标
cps-icon 样式被 t-icon 覆盖了

框架版本

No response

浏览器版本

No response

系统版本

No response

Node版本

No response

补充说明

No response

这个功能解决了什么问题

希望可以增加线条粗细

你建议的方案是什么

适配参数stroke-width

这个功能解决了什么问题

现有 tdesign-icons-react 标明的 peerDependencies 依赖不支持 React v18+ 版本的代码，安装时会报错，涉及代码如下：

"peerDependencies": {
    "react": "^16.0.0 || ^17.0.0",
    "react-dom": "^16.0.0 || ^17.0.0"
  },

你建议的方案是什么

• ^18.0.0

这个功能解决了什么问题

pin 存在状态的切换，系统库增加 pin-filled 样式

你建议的方案是什么