icon-svg (_base.scscs)

Tipo: Mixin

Versión: 2.x.x

Inserta un SVG como background-image. Requiere postcss-inline-svg para resolver las funciones usadas por el mixin.

Admite firma posicional o sintaxis map con opciones para tamaño, color, ruta, posición y fondo. Las claves position y background reutilizan la sintaxis de los mixins position y background.

Interface 

@mixin icon-svg($svg, $w: auto, $h: auto, $fill: "none", $def: "none", $path: "../../img/svg/");

Valores por defecto: w auto, h auto, fill "none", def "none", path "../../img/svg/".

Parámetros secuenciales

Parámetro Tipo Default Descripción
svg String - Define el nombre del archivo SVG.
w Medida auto Define la propiedad width.
h Medida auto Define la propiedad height.
fill Color | String "none" Aplica el color del SVG con svg-load o activa el modo inline.
def String "none" Define el SVG inline usado cuando fill es "inline".
path String "../../img/svg/" Define la ruta base desde donde se carga el archivo SVG.

Sintaxis alternativa (map) 

@include icon-svg((
    svg: "sisass",
    width: 32px,
    height: 32px,
    fill: $c5,
    def: "none",
    path: "../../img/svg/",
    position: (
        position: absolute,
        y: 0,
        x: 0,
        yaxis: top,
        xaxis: left,
        top: null,
        right: null,
        bottom: null,
        left: null
    ),
    background: (
        repeat: no-repeat,
        position: top left,
        color: transparent,
        size: 100%
    )
));

Valores por defecto: svg "", width auto, height auto, fill "none", def "none", path "../../img/svg/".

Uso recomendado: icon-svg dibuja el SVG y su fondo, mientras replace-base prepara el contenedor. Si buscas el flujo ya configurado para SVG, puedes usar normalize-svg como wrapper especializado.

Sintaxis map

Clave Tipo Default Descripción
svg | icon | name String "" Define el nombre del archivo SVG a usar.
width | w Medida auto Define el ancho aplicado al elemento.
height | h Medida auto Define el alto aplicado al elemento.
fill Color | String "none" Colorea el SVG con svg-load o usa "inline".
def | inline | inline_svg String "none" Define el contenido inline del SVG cuando se usa ese modo.
path | base_path | svg_path String "../../img/svg/" Define la ruta base para construir la URL del SVG.
position Map (position | p: absolute, y: 0, x: 0, yaxis | ya: top, xaxis | xa: left, top: null, right: null, bottom: null, left: null) Controla la posición usada por el mixin position y sigue su misma sintaxis map para esas claves.
background Map (repeat: no-repeat, position: top left, color: transparent, size: 100%) Controla repeat, position, color y size del fondo final con la sintaxis map usada por el mixin background para esas claves.

Ejemplo

Nota: cuando el SVG se usa en ::before o ::after, normalmente se combina con replace-base para preparar el contenedor con tamaño, display, posición, z-index y ocultamiento opcional de texto. Si prefieres una configuración ya orientada a SVG, usa normalize-svg. 


            


            

                

            


            

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