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

AvatarGiser

于 2024-04-18 17:55:18 发布

阅读量846

点赞数 5

CC 4.0 BY-SA版权

分类专栏：《ElementUI 基础知识》文章标签： elementui 前端 javascript

本文链接：https://blog.csdn.net/sinat_31213021/article/details/137928871

前言

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);
}