如何只加载与屏幕兼容的图标？

在前端开发中，可以通过以下几种方式来实现只加载与屏幕兼容的图标：

1. 使用矢量图标：矢量图标是基于数学公式描述的图形，可以无损放大缩小而不失真。常见的矢量图标格式有SVG（Scalable Vector Graphics）和Icon Font。SVG图标可以直接嵌入到HTML中，而Icon Font则是将图标字形嵌入到字体文件中，通过CSS样式来引用。这两种方式都可以根据屏幕大小动态调整图标的大小，从而实现兼容不同屏幕的效果。
2. 响应式图标库：一些第三方图标库（如Font Awesome、Material Icons等）提供了响应式的图标，可以根据屏幕大小自动加载适应的图标。这些图标库通常提供了多种尺寸和样式的图标，开发者可以根据需要选择合适的图标进行使用。
3. 媒体查询：通过CSS的媒体查询功能，可以根据屏幕大小来选择加载不同尺寸的图标。可以在CSS中定义多个不同尺寸的图标，并使用媒体查询来根据屏幕大小选择合适的图标进行显示。
4. 图标字体子集：如果使用了图标字体，可以通过字体子集的方式来减小字体文件的大小。字体子集是指从完整的字体文件中提取出实际使用到的字符，从而减小文件大小。可以使用一些工具（如Fontello、IcoMoon等）来生成字体子集。
5. 图片压缩和优化：对于使用图片作为图标的情况，可以使用图片压缩和优化的技术来减小图片文件的大小。可以使用工具（如TinyPNG、ImageOptim等）来压缩和优化图片，从而减小加载时间和带宽消耗。

腾讯云相关产品推荐：

• 腾讯云对象存储（COS）：提供高可靠、低成本的云端存储服务，可用于存储图标文件。详情请参考：腾讯云对象存储（COS）
• 腾讯云内容分发网络（CDN）：加速静态资源的分发，提高图标加载速度。详情请参考：腾讯云内容分发网络（CDN）

请注意，以上答案仅供参考，具体的实现方式和产品选择应根据实际需求和情况进行决策。