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. El mapa acepta aliases como color | c, position | p, xaxis | xa, yaxis | ya, width | w, height | h, repeat | r, size | s y display | d.

Interface 

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

Valores por defecto: svg false, color | c #FFFFFF, position | p absolute, x 0, y 0, xaxis | xa left, yaxis | ya top, 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 | Bool false Nombre base del archivo SVG. Si es false, no genera la máscara.
color | c Color #FFFFFF Define el color final del icono mediante background-color.
position | p String | Bool absolute Tipo de posicionamiento usado por el mixin position. Si es false, no aplica posicionamiento.
x Medida 0 Desplazamiento horizontal aplicado por position().
y Medida 0 Desplazamiento vertical aplicado por position().
xaxis | xa String left Eje horizontal usado por position().
yaxis | ya String top Eje vertical usado por position().
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>