图标库示例

Swift Web 项目使用两类图标:业务自定义图标通过 AppIcon 组件统一管理; 通用图标按需引入 Phosphor Icons点击任意图标卡片即可复制使用代码到剪贴板。

业务自定义图标(AppIcon)

把新 SVG 丢进 app/assets/icons/ 即可。dev 模式下 starter 的 Vite 插件会自动监听该目录,文件变化时自动 injectIcons() 把图标写入 AppIcon.vue 命名分支,无需手动跑命令AppIcon.vue 是入库文件,修改后正常 commit 即可。

通用图标(Phosphor Icons)

@phosphor-icons/vue 按需 import,支持 size / weight / color 等 prop。 完整图标库可在 phosphoricons.com 检索。

thin
light
regular
bold
fill
duotone
画廊风格:

箭头方向导航、滚动、跳转方向指示

文本编辑富文本编辑器工具栏常用

用户社交账户、评论、点赞、关注

文件操作文档、文件夹、保存、复制粘贴

媒体控制音视频播放、相机、图片

通讯通知电话、铃声、分享、推送

设置系统配置、搜索、安全、权限

状态反馈操作结果、信息提示、加载