Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[icon] 在无公网环境下使用,默认添加的<script class="t-svg-js-stylesheet--unique-class" src="https://tdesign.gtimg.com/icon/0.1.4/fonts/index.js"></script> 会有一个请求错误 #72

Open
zerlei opened this issue Jul 26, 2023 · 8 comments
Assignees
Labels
enhancement New feature or request

Comments

@zerlei
Copy link

zerlei commented Jul 26, 2023

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

@github-actions
Copy link

👋 @ZhaoYouYa,感谢给 TDesign 提出了 issue。
请根据 issue 模版确保背景信息的完善,我们将调查并尽快回复你。

@github-actions
Copy link

github-actions bot commented Jul 26, 2023

♥️ 有劳 @uyarn 尽快确认问题。
确认有效后将下一步计划和可能需要的时间回复给 @ZhaoYouYa 。

@zerlei zerlei changed the title [icon] 在无公网环境下使用,默认添加的 [icon] 在无公网环境下使用,默认添加的<script class="t-svg-js-stylesheet--unique-class" src="https://tdesign.gtimg.com/icon/0.1.4/fonts/index.js"></script> 会有一个请求错误 Jul 26, 2023
@uyarn
Copy link
Collaborator

uyarn commented Jul 26, 2023

目前这种使用方式就是会发起网络请求的 你的场景可以换成按需单个图标使用吗

@yixiaco
Copy link
Contributor

yixiaco commented Jul 26, 2023

我是用这种方式解决的,自己定义了一个组件

<template>
  <KeepAlive :max="100">
    <component :is="rowComponent" v-bind="$attrs" />
  </KeepAlive>
</template>
<script lang="ts">
export default {
  name: 'RIcon',
};
</script>
<script lang="ts" setup>
import * as Icons from 'tdesign-icons-vue-next/lib/icons';
import { computed } from 'vue';

const components = new Map();
Object.entries(Icons).forEach((value) => {
  // 将驼峰命名的组件名称转为横杠分割的组件名称,例如:Add12Icon => add-12-icon
  const componentName = value[0].replace(/([0-9]+|[A-Z])/g, (match, p1, offset) => {
    return offset === 0 ? p1.toLowerCase() : `-${p1.toLowerCase()}`;
  });
  components.set(componentName, value[1]);
});

const props = defineProps({
  name: {
    type: String,
  },
});

const rowComponent = computed(() => {
  if (!props.name) {
    return null;
  }
  return components.get(`${props.name}-icon`);
});
</script>

@zerlei
Copy link
Author

zerlei commented Jul 27, 2023

感谢您的回复。

考虑到我是在无公网环境下使用,我使用icon是这样的方式

  1. 如果事先确定icon。
<template>
  <add-icon />
  <my-svg />
</template>
<script>

import { AddIcon } from 'tdesign-icons-vue-next'
//使用vite,插件 svgloader
import MySvg from "@/assets/mysvg.svg"

</script>
  1. 如果我并不能事先确定icon,但知道icon的范围,大致和您(@yixiaco )使用的方式一样

  2. 如果icon 是一个我可以访问到的url地址(非公网),我可能会直接使用 <img src="./exampleurl.svg"/>,或者使用 tdesign的 <t-icon :url="./exampleurl.svg" />

我没有像下面这样使用icon:

<!-- 我知道这样需要公网,后续也不会这样使用 -->
<icon-font name="loading" />

对我而言,这个错误不会造成当没有公网环境时,图标无法显示的问题。只是严谨来说,当我不在公网环境使用时,该<script>可以不被添加。

@uyarn
Copy link
Collaborator

uyarn commented Jul 28, 2023

这个我在下个版本的图标上考虑支持下吧 这种问题相关的issue确实挺多的 transfer到icon仓库跟进

@uyarn uyarn added the enhancement New feature or request label Jul 28, 2023
@uyarn uyarn transferred this issue from Tencent/tdesign-vue-next Jul 28, 2023
@github-actions
Copy link

👋 @ZhaoYouYa,感谢给 TDesign 提出了 issue。
请根据 issue 模版确保背景信息的完善,我们将调查并尽快回复你。

@zerlei
Copy link
Author

zerlei commented Jul 29, 2023

这个我在下个版本的图标上考虑支持下吧 这种问题相关的issue确实挺多的 transfer到icon仓库跟进

感谢 感谢😀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

4 participants