src/objects/_icon.scss


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

@use 'iro-sass/src/index' as iro;

@include iro.props-namespace('icon') {
    @include iro.bem-object(iro.props-namespace()) {
        display:         inline-block;
        width:           1em;
        height:          1em;
        stroke-width:    var(--icon-stroke-width, 1.5px);
        stroke-linecap:  round;
        stroke-linejoin: round;
        vertical-align:  -.2em;

        @include iro.bem-modifier('block') {
            display: block;
        }
    }

    @keyframes rotate {
        100% {
            transform: rotate(360deg);
        }
    }

    @keyframes dash {
        0% {
            stroke-dasharray: 1, 200;
            stroke-dashoffset: 0;
        }

        50% {
            stroke-dasharray: 89, 200;
            stroke-dashoffset: -35px;
        }

        100% {
            stroke-dasharray: 89, 200;
            stroke-dashoffset: -124px;
        }
    }
}