IconFontViewer -- 一个可以在 Android Studio 中实时预览 IconFont 的插件

为什么做这个插件?

相信很多在 Android 项目里使用 iconfont 资源的朋友都有相同的痛点。

iconfont 的图标在 AS 中使用的时候,一般是通过自定义的 IconFontTextView 来渲染的,本质上是以文本的方式渲染。所以在 AS 中,不能像图片资源那样,在 IDE 的侧边栏中预览。

每次在代码中引用 iconfont 的字符串时,都要去 iconfont 网站的项目里去查看字符对应的图标是什么。

因此很自然地想到,能不能做一个 AS 插件,可以支持在 AS 中实时预览 iconfont,最终完成了这个插件--IconFontViewer。

IconFontViewer 插件

插件主页:plugins.jetbrains.com/plugin/3147...

插件市场

AS 的插件市场里搜索 「IconFontViewer」,直接下载安装:

功能和效果

扫描项目中所有 ttf

AS 启动时,会自动扫描所有 ttf,识别出其中可能是 iconfont 的字体文件,并对这些文件启用预览。通过 Tools -> IconFontViewer 打开字体面板。

实时预览

在代码文件、xml 资源、布局文件中,只要引用了 iconfont 的字符串,就会在侧边栏展示 icon 的预览。和 AS 原生的图片引用一样的效果。

切换 icon

类似原生 AS 图片预览切换的功能,点击预览的 icon,可以弹出当前字符所属 ttf 的所有字符图标,可以搜索选择并替换。

源码地址

github:github.com/ultimateHan...

相关推荐
懂懂tty1 天前
Web前端性能指标
前端
绝世唐门三哥1 天前
vue3中页面返回时刷新首页的处理方案
开发语言·前端·javascript
东方小月1 天前
agent-skills:把资深工程师的‘工作流’,装进你的AI编程里
前端·架构·代码规范
Maynor9961 天前
AI Coding 零基础实战教程|第五部分:完整项目案例实操
java·前端·人工智能·claude code·ai coding
binbin_521 天前
React 井字棋教程:用一个小游戏理解组件和状态
前端·react.js·前端框架
梦曦i1 天前
uni-router新推useUniEventChannel,彻底解决页面通信难题
前端·uni-app
柯克七七1 天前
给老项目加了 TypeScript,本来只想自己爽,结果全公司代码审查标准被我抬高了
前端·vue.js·typescript
玩机达人881 天前
一加12/Ace5/Ace3pro手机ColorOS16降级回锁BL熔断变黑砖怎么办
android·智能手机·电脑
yuanlaile1 天前
前端转 Flutter 自学完整规划,避开跨栈思维转换误区
前端·flutter·flutter跨平台开发
CN_HW1 天前
Nginx 流量镜像配置文档-双轨国产化
服务器·前端·网络