icon 希望增加无网络场景使用，且不要一个一个引入

[xjcallen]

这个功能解决了什么问题

icon图标库， 希望增加无网络场景使用，且不要一个一个引入 因为很多时候需要循环出来，无法预知是那个图标

举个例子：我的导航图标是后台动态配置的需要循环出来显示

https://github.com/Tencent/tdesign-icons/issues/72#issuecomment-1655046706 我看23年就回复说下一个版本考虑，但是现在还不行吗

强烈建议能考虑下无网络环境的用户。

拜托了

你建议的方案是什么

/

[github-actions[bot]]

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

[github-actions[bot]]

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

[uyarn]

您好，因为我们这段时间一直在补充图标，图标数量来到了2000多个，所以我们需要重新考虑将svgsprite和iconfont内置包内而非CDN的影响，所以没有很快上线这个改动

[Nemowxy]

+1需要离线场景

[xjcallen]

已经换了其它库，remixicon非常不错

[Owen-Tsai]

一个可行的方案是将外部请求的文件（index.js）放置于自己的项目中以供请求，或者直接将里面的内容插入到 HTML。该 script 的作用是创建一个包含所有图标 symbol 的 svg 元素并插入 DOM，从而使 Icon 组件可以通过 <use href="#"> 的方式消费。

进行封装，例如 vue 场景下：

<template>
  <svg :class="['t-icon', 'fux-icon', fullName]" v-bind="$attrs">
    <use :href="`#${fullName}`"></use>
  </svg>
</template>

<script setup lang="ts">
const { name } = defineProps<{
  name: string
}>()

const fullName = computed(() => `t-icon-${name}`)
</script>

使用自定义的 <Icon> 替代 <TIcon> 即可。必要时，增加其他的 props。