🎨 新手小白学开发找不到 SVG 素材？这 3 个宝藏网站请收好！
摘要：鸿蒙训练营进行中，有同学反馈找不到合适的 SVG 图标？别急！本文精选 3 个高质量、免费可商用的 SVG 素材网站（阿里 Iconfont、Heroicons、unDraw），手把手教你搜索、下载、使用，让界面开发不再“缺图”！
👋 前言：开发路上的“小拦路虎”
最近我们的鸿蒙训练营正在火热进行中！🔥
在交流中，我发现不少刚入门的“小白”同学遇到了一个共同的小难题：
“我想给界面加个图标，但是找不到 SVG 格式 的图片怎么办？”
“网上的图片格式不对，放进代码里不显示……”
其实，找对工具，这个问题迎刃而解！
今天，我就为大家整理了 3 个开发者必备的 SVG 素材宝库。无论你是做图标、极简线条，还是精美插画，这里都能满足你！
1️⃣ 阿里 Iconfont：国内最大的图标库 🇨🇳
如果你需要海量的图标，Iconfont 绝对是首选。
- • 🔗 网址：https://www.iconfont.cn/
- • 个人及商用免费（具体使用时请注意查看单个图标的版权说明）。
🛠️ 如何使用？
第一步：搜索图标
进入官网首页，直接在顶部的搜索框输入你想要的关键词。
Iconfont官网首页比如我搜索“主页”，瞬间就能找到 5000+ 个相关图标，选择多到眼花缭乱！
搜索主页图标
搜索结果展示第二步：下载与定制
点击心仪图标下方的“下载”按钮。
点击下载按钮在弹出的窗口中，你可以自定义颜色和下载格式（务必选择 SVG）。下载完成后，即可直接导入项目使用。
更改样式和格式第三步：在代码中使用
下载好的 SVG 文件，可以直接在鸿蒙开发的 ArkUI 中引用，效果完美！
使用效果展示
2️⃣ Heroicons：极简开发者的最爱 ⚡
如果你喜欢 Tailwind CSS 那种简约、现代的风格，或者你的应用需要一套规范的 24px 网格图标，那么 Heroicons 是不二之选。
- • 🔗 网址：https://heroicons.com/ (推荐 Mini 版本: https://heroicons.com/mini)
- • Tailwind CSS 官方出品，品质保证。
- • 提供 Outline（轮廓）和 Solid（实心）两种样式。
🛠️ 如何使用？
进入网站后，你会看到整齐排列的图标库，无需注册，直接使用。
Heroicons界面复制即用：
点击任意图标，它会自动复制 SVG 代码 到你的剪贴板。
复制SVG代码本地预览：
我们将这段代码粘贴到本地的 HTML 或编辑器中，它起初看起来像是一段普通的 HTML 代码。
本地粘贴代码只要渲染出来（或点击空白处预览），精美的图标立刻呈现！
渲染出图片
(注：在鸿蒙 ArkTS 中，你可以直接将 SVG 内容放入 <svg> 组件或通过 src 引用)
3️⃣ unDraw：免费可商用的精美插画 🎨
除了小图标，有时候我们需要一些场景化插画来丰富页面（比如空状态页、欢迎页）。unDraw 提供了大量高质量的扁平风插画。
- • 🔗 网址：https://undraw.co/illustrations
- • 一键全局换色：可以输入你的品牌色，全站插画自动同步变色！
- • 完全免费商用（基于 MIT 协议），无需署名。
🛠️ 如何使用？
浏览网站，找到你喜欢的插画场景。
unDraw插画库点击插画，你可以自由选择下载 SVG 或 PNG 格式。对于开发来说，强烈推荐 SVG，因为它是矢量的，无论怎么放大都不会模糊，且方便代码控制颜色。
下载SVG或PNG下载后直接放入项目中，瞬间提升应用的颜值！
💡 写在最后
工欲善其事，必先利其器。
对于新手小白来说，学会寻找和利用优质的素材资源，能让你的开发效率翻倍，也能让你的应用界面更加专业。
希望这三个网站能帮到正在参加鸿蒙训练营的同学们，也祝大家的项目越来越漂亮！🚀
如果在开发中还遇到其他问题，欢迎在评论区留言，我们一起解决！
👇 觉得有用？点赞 + 在看，分享给更多的小伙伴！
