icon-svg-mask (_base.scscs)

Tipo: Mixin

Versión: 2.x.x

Aplica un SVG como máscara CSS y colorea el resultado con background-color.

Requiere postcss-inline-svg porque utiliza svg-load() para construir mask-image. También usa el mixin position cuando la clave position | p es distinta de false. Esta clave acepta el mapa completo del mixin position; también admite un valor escalar para definir únicamente la propiedad position.

Interface 

@mixin icon-svg-mask($attr: (
    svg: null,
    color: #FFFFFF,
    position: (
        position: absolute,
        y: 0,
        x: 0,
        yaxis: top,
        xaxis: left,
        top: null,
        right: null,
        bottom: null,
        left: null,
        z: 1
    ),
    width: 100px,
    height: 100px,
    repeat: no-repeat,
    size: contain,
    path: "../../img/svg/",
    display: block
));

Valores por defecto: svg null, color | c #FFFFFF, position | p (position: absolute), width | w 100px, height | h 100px, repeat | r no-repeat, size | s contain, path "../../img/svg/" y display | d block.

Sintaxis map

Clave Tipo Default Descripción
svg String | Null null Nombre base del archivo SVG. Si es null, no genera la máscara.
color | c Color #FFFFFF Define el color final del icono mediante background-color.
position | p Map | String | Bool (position: absolute) Configura el posicionamiento con la sintaxis del mixin position. Si es false, no genera propiedades de posición.
width | w Medida 100px Asigna el ancho del área visible del icono.
height | h Medida 100px Asigna el alto del área visible del icono.
repeat | r String no-repeat Controla la repetición de la máscara.
size | s String | Medida contain Controla el escalado de la máscara SVG.
path String "../../img/svg/" Prefijo de ruta donde se busca el archivo SVG.
display | d String block Define el valor de display del elemento.

Ejemplo 


            


            

                

            


            

                
<span class="icon-svg-mask-example"></span>