《ElementUI 基础知识》png 图片扩展 icon用法

最新推荐文章于 2024-08-26 21:24:54 发布

原创

最新推荐文章于 2024-08-26 21:24:54 发布 · 1k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #前端 #javascript

前言

UI 设计给的切图是 .png 格式。但想与 Element UI icon 用法类似，方案如下。

实现

步骤一

准备图片

在这里插入图片描述

步骤二

新建文件，可使用 CSS 预处理语言 styl 或 scss。

stylus 方式

文件 icon.styl

/* 定义一个混合 */
cfgIcon(w, h) {
   
   
    display: inline-block;
    width: w;
    height: h;
    background-size: w h;
    margin-right: 8px;
}

.my-icon-loading {
   
   
    background: url(./images/loading.png);
    cfgIcon(10px,10px);
}