Get-svg-icons:VS Code 扩展

2025-06-04

Get-svg-icons:VS Code 扩展

如果你是一名前端开发者,那么你肯定要花费大量的时间和精力来为你的网站设计一个完美的图标。你必须浏览 Flaticon、Font Awesome、Material Icons 等网站,找到合适的图标,下载 SVG 文件或复制字体,最后还要将相应的库添加到你的代码库中。减少这些麻烦以及导入外部包所带来的包大小,正是这个 VS Code 扩展背后的主要灵感所在。

有了 Get-Svg-Icons 扩展程序,您无需再前往其他网站选择图标,VS Code 本身就能轻松搞定一切。侧面板带有可自定义的图标,VSCode 编辑器内置的图标建议功能让图标选择过程更加轻松,从而提高开发人员的工作效率。

特征

带有可自定义图标的侧面板

  • 侧面板包含约 1300 多个图标
  • 用户可以搜索图标名称(或与其关联的标签)并选择所需的图标
  • 单击图标后,相应的 svg 代码将插入到代码编辑器的最后一个活动位置
  • 用户可以直接从侧面板更改 svg 的高度和宽度

演示

内联图标建议

  • 输入“icon-”(不带引号)即可自动补全图标。如果图标预览未显示(如下方 GIF 动图所示),请按 Ctrl+Space(默认快捷键)或点击“>”图标展开详细信息视图。
  • 将使用 svg 对所选图标进行内联替换。

演示

悬停时图标预览

  • 将鼠标悬停在 svg 代码(类名)上时,您可以预览相应 svg 代码段的图标

点击此处获取扩展程序
想要贡献代码?前往Github 代码库

文章来源:https://dev.to/bodhisha/get-svg-icons-vs-code-extension-9g4
PREV
在 Firebase 上开始使用 Google Cloud Functions 优势 入门 Node 版本管理器 部署到 Firebase 编写 API 结局
NEXT
开发者如何摆脱拖延症 引言 1. 设定目标。 2. 找出一天中哪个时间段效率更高。 3. 排除干扰 4. 尝试番茄工作法 5. 养成晨间习惯 书籍推荐 结论