重庆熊猫 Loading

ExtJS 使用 Fonts Google 的方法(SVG图标通用)

更新记录
2023年5月19日 初始化。

ExtJS教程汇总:https://www.cnblogs.com/cqpanda/p/16328016.html

选择图标

进入网站:https://fonts.google.com/icons 搜索想要的图标

下载图标SVG文件转为base64

image

然后使用在线工具转为base64
https://products.aspose.app/imaging/zh-hans/conversion/svg-to-base64

在组件的scss文件中定义图标类

.icon-svg-material-symbols-outlined {
            background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iNDgiIHZpZXdCb3g9IjAgOTYgOTYwIDk2MCIgd2lkdGg9IjQ4Ij48cGF0aCBkPSJtMjQ5IDg0OS00Mi00MiAyMzEtMjMxLTIzMS0yMzEgNDItNDIgMjMxIDIzMSAyMzEtMjMxIDQyIDQyLTIzMSAyMzEgMjMxIDIzMS00MiA0Mi0yMzEtMjMxLTIzMSAyMzFaIi8+PC9zdmc+");
            background-size: contain;
            width: 24px;
            height: 24px;
        }

在组件中使用

{
    xtype: 'button',
    text: 'button',
    iconCls: 'icon-svg-material-symbols-outlined',
},
posted @ 2023-05-19 10:57  重庆熊猫  阅读(62)  评论(0编辑  收藏  举报