isf：一个极简的使用SVG的CSS图标框架

文中【】的内容为类选择器

---

搞前端的朋友都知道小图标对于前端的作用，那是极为重要的，但是由于技术涉及面较多，图标框架想要根据自己意愿添加图标有一定的难度，只能在哀叹中盼着图标库更新。

我就把我近两年使用的图标框架分享出来，相信我的这个方法目前应该还没有其他人在使用。

特点：

1. 最终要特点的就是非常简单直观，一看就明白，当然需要对css熟悉一点
2. 需要浏览器支持mask-image（Chrome、Opera、Safari支持，Firefox和IE不支持）
3. 只能使用单色（其他图标库也是单色）
4. 使用纯css，只有css
5. 可十分简单的自定义添加自己喜欢的图标

思路：

想要用纯css实现图标库，就要达到以下条件

1. 能插入SVG图标
2. 要能继承颜色
3. 要能继承字体大小

看起来很简单，但是起手做的时候还是费了一番脑筋的。

首先插入SVG背景图案并不难，能给SVG上色也能通过mask实现，最难的就是继承大小，要知道SVG是背景，让背景继承文字大小几乎没有头绪，但是当实现的时候看起来还是那么简单。好了请看代码：

CSS代码

.isf:before {
    --rotate: rotate(0deg);    /*旋转 变量*/
    --rotateX: rotateX(0deg);    /*水平方向旋转 变量*/
    --rotateY: rotateY(0deg);    /*垂直方向旋转 变量*/
    --translate: translate(0%, 15%);    /*移动位置 变量,和小写h字母比较，让图标下边框与h底部对齐，对于需要再次调整位置的，在对应的图标设定下可以再次设定*/
    content: " ";
    display: inline-block;
    width: 1em;    /*继承字体大小*/
    height: 1em;
    background-color: currentColor;    /*继承颜色*/
    -webkit-mask-image: var(--bgimg);
    mask-image: var(--bgimg);
    transform: var(--translate) var(--rotate) var(--rotateX) var(--rotateY);
}

.isf-home:before {
    --bgimg: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><!--房子--><path d="M877.61 469.17 l0 305.13 q0 16.76 -12.35 28.22 q-11.46 12.35 -28.22 12.35 l-244.28 0 l0 -244.29 l-162.27 0 l0 244.29 l-244.29 0 q-15.87 0 -28.22 -12.35 q-12.34 -11.46 -12.34 -28.22 l0 -305.13 q0 -0.89 0.88 -1.77 l0 -1.76 l365.1 -300.73 l365.1 300.73 q0.89 0.88 0.89 3.53 l0 0 ZM1019.59 425.95 l-39.68 46.74 q-5.3 5.29 -13.23 7.06 l-1.77 0 q-8.82 0 -13.22 -4.41 l-440.07 -366.87 l-439.18 366.87 q-7.94 4.41 -14.99 4.41 q-8.82 -1.77 -14.11 -7.06 l-38.8 -46.74 q-5.3 -7.05 -4.41 -15.87 q0 -7.94 7.05 -13.23 l455.94 -380.09 q21.16 -16.76 48.5 -16.76 q28.22 0 48.51 16.76 l155.21 129.63 l0 -124.34 q0 -8.82 5.29 -14.11 q6.17 -6.18 14.99 -6.18 l121.7 0 q8.82 0 14.99 6.18 q5.3 5.29 5.3 14.11 l0 259.27 l139.33 115.53 q6.18 5.29 7.06 13.23 q0 8.82 -4.41 15.87 l0 0 Z"/></svg>');
    --translate: translate(0%, 35%);/*再次调整位置，和小写h对齐*/
}

/********************这里插入新的图标********************/
/********************这里插入新的图标********************/
/********************这里插入新的图标********************/
/********************这里插入新的图标********************/
/********************这里插入新的图标********************/
/********************这里插入新的图标********************/
/********************这里插入新的图标********************/

.isf-rotate-90:before { 
    --rotate: rotate(90deg) ;/*旋转 变量*/
}

.isf-rotate-180:before {
    --rotate: rotate(180deg) ;/*旋转 变量*/
}

.isf-rotate-270:before {
    --rotate: rotate(270deg) ;/*旋转 变量*/
}

.isf-flip-y:before {
    --rotateY: rotateY(180deg) ;    /*水平翻转 变量*/
}

.isf-flip-x:before {
    --rotateX: rotateX(180deg) ;    /*垂直翻转 变量*/
}

.isf-spin:before {   /*线性旋转*/
    -webkit-animation: isf-spin 2s infinite linear;
    animation: isf-spin 2s infinite linear;
}

.isf-pulse:before {   /*跳跃式旋转*/
    -webkit-animation: isf-spin 1s infinite steps(10);
    animation: isf-spin 1s infinite steps(10);
}

@-webkit-keyframes isf-spin {
    0% {
        -webkit-transform: var(--translate) rotate(0deg) var(--rotateX) var(--rotateY);
        transform: var(--translate) rotate(0deg) var(--rotateX) var(--rotateY);
    }

    100% {
        -webkit-transform: var(--translate) rotate(359deg) var(--rotateX) var(--rotateY);
        transform: var(--translate) rotate(359deg) var(--rotateX) var(--rotateY);
    }
}

@keyframes isf-spin {
    0% {
        -webkit-transform: var(--translate) rotate(0deg) var(--rotateX) var(--rotateY);
        transform: var(--translate) rotate(0deg) var(--rotateX) var(--rotateY);
    }

    100% {
        -webkit-transform: var(--translate) rotate(359deg) var(--rotateX) var(--rotateY);
        transform: var(--translate) rotate(359deg) var(--rotateX) var(--rotateY);
    }
}

应用演示

<a class="isf isf-home" style="font-size:100px;color: red;">h</a>
<a class="isf isf-home" style="font-size:50px;color: blur;">h</a>
<a class="isf isf-home isf-flip-x">h</a>
<a class="isf isf-home isf-flip-y">h</a>
<a class="isf isf-home isf-rotate-90">h</a>
<a class="isf isf-home isf-rotate-270">h</a>
<a class="isf isf-home isf-rotate-180">h</a>
<a class="isf isf-home isf-spin">h</a>

代码和演示中只有一个图标，更多的图标还需要自己添加，但添加图标确是非常非常的简单。

添加给库添加图标

.isf-自定义的名字:before {
    --bgimg: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><!--新的svg代码添加在这里--></svg>');
    --translate: translate(0%, 35%);
}

上面的代码是添加的模板，我一般都是在阿里图标库找的（因为不会svg，所以只能用现成的），如果你不是在阿里图标库（https://www.iconfont.cn/）找，那么你可能需要修改viewBox

添加步骤：

1. 在阿里图标库找到需要的图标
2. 点击下载，这时会有个提示框（好像是需要登录的）
3. 右键打开svg代码位置
4. 复制svg标签内的所有内容粘贴到<!--新的svg代码添加在这里-->

注意：

新的代码要删除无用的属性，反正除了画画用的属性，全删了就好，特别是颜色属性，如fill、stroke等，否则可能造成无法显示的情况。

使用说明

请尽可能的将本图标库放在文档的前面。

字体大小和颜色均继承所在元素属性。

<script>
.red{color:red}
font16{font-size:16px}
font24{font-size:24px}
</script>

<a class="isf isf-home" style="font-size:100px;color: red;">图标变红，字体大小100px</a>
<a class="isf isf-home" style="font-size:3em;color: blur;">图标变蓝，3倍字体</a>
<a class="isf isf-home font16 isf-flip-x">图标颠倒了</a>
<a class="isf isf-home font24 isf-flip-y">图标翻转了</a>
<a class="isf isf-home red isf-rotate-90">图标转了90度</a>
<a class="isf isf-home isf-rotate-270">图标转了90度</a>
<a class="isf isf-home isf-rotate-180">图标转了半圈</a>
<a class="isf isf-home isf-spin">图标在不停的转</a>

奇淫巧技

CSS覆盖

按代码先后，后面出现的会覆盖前面出现的。

以类选择器【isf-rotate-90】为例，如果【isf-rotate-90】写在文档最上方，在使用旋转90度的时候会无效，因为【isf-rotate-90】的内容无法覆盖类选择器【isf:before】中对应的内容，因此要使用【isf-rotate-90】必须把它放在【isf:before】的在最后面。

变量

还以类选择器【isf-rotate-90】为例，在未使用变量的情况下，应该是这样的

.isf:before{transform：translate(0%, 15%)}
.isf-rotate-90{transform：rotate(90deg)}

这样【isf-rotate-90】中的transform属性就会把【isf:before】中的transform属性完全覆盖掉，这就不是我想要的效果，我想要的效果是让多种transform效果组合起来，于是我就用了变量，只需要把新的变量放在【isf-rotate-90】中用来替换【isf:before】中的对应的变量即可，这样就实现了多种变量的随意组合，所以【isf:before】中应该有transform属性中要组合的变量，其值应该是和默认效果一样的，以供其他类选择器替换。

没什么可说的后记

由于mask的问题，使得我的图标库不能再所有浏览器下使用，IE用的人已经不多了，支持文档中说火狐是不支持的但是实际上是可以使用的。

随便自定义图标的日子来了，祝愿前端的朋友们们早日脱离fa和mdi！！

isf构建工具：https://blog.csdn.net/chinaskysun/article/details/106863568