Newly Practicing Mortician

    sass-svg

    1.2.0 • Public • Published

    sass-svg

    Inline SVG for Sass.

    (Made using Sassdash!)

    Quick Start

    • npm install sass-svg --save
    // Will likely be ../node_modules/sass-svg/index 
    @import 'path/to/sass-svg';
     
    .arrow {
      @include svg {
        @include svg('polygon', (
          fill: green, 
          points: (50,100 0,0 0,100) 
        ));
      }
    }

    Result:

    .arrow {
      background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns
        %3D%22http%3A%2F%2Fwww%2Ew3%2Eorg%2F2000%2Fsvg%22%3E%3Cpolygon
        %20fill%3D%22green%22%20points%3D%2250%2C%20100%200%2C%200%200
        %2C%20100%22%2F%3E%3C%2Fsvg%3E");
    }

    Sassier Example

    This shows how you can use nesting and variables to create complex SVG shapes.

    @import 'path/to/sass-svg';
     
    $sass-color: #CC6699;
     
    .sass {
      height: 100%;
      width: 100%;
      background-repeat: no-repeat;
     
      @include svg((
        x: 0px, 
        y: 0px, 
        viewBox: 0 0 410.9 410.9, 
        'xml:space': preserve
      )) {
        @include svg('path', (
          fill-rule: evenodd, 
          clip-rule: evenodd, 
          fill: $sass-color, 
          d: 'M205.4,0c113.5,0,205.4,92,205.4,205.4c0,113.5-92,205.4-205.4,205.4C92,410.9,0,318.9,0,205.4 C0,92,92,0,205.4,0L205.4,0z' 
        ));
     
        @include svg('g') {
          @include svg('path', (
            fill: white, 
            d: 'M334.3,87.9c-9.3-36.5-69.8-48.5-127.1-28.1c-34.1,12.1-71,31.1-97.5,55.9c-31.5,29.5-36.6,55.2-34.5,65.9 c7.3,37.9,59.2,62.6,80.5,81v0.1c-6.3,3.1-52.3,26.4-63.1,50.2c-11.4,25.1,1.8,43.1,10.5,45.6c27,7.5,54.7-6,69.6-28.2
            c14.4-21.4,13.2-49.1,6.9-62.9c8.6-2.3,18.7-3.3,31.4-1.8c36,4.2,43.1,26.7,41.8,36.1c-1.4,9.4-8.9,14.6-11.4,16.2
            c-2.5,1.6-3.3,2.1-3.1,3.3c0.3,1.7,1.5,1.6,3.6,1.3c3-0.5,18.9-7.7,19.6-25c0.9-22.1-20.3-46.8-57.7-46.1
            c-15.4,0.3-25.1,1.7-32.1,4.3c-0.5-0.6-1-1.2-1.6-1.8c-23.2-24.7-66-42.2-64.1-75.4c0.7-12.1,4.9-43.9,82.2-82.4
            c63.4-31.6,114.1-22.9,122.9-3.6c12.5,27.5-27.1,78.7-93,86.1c-25.1,2.8-38.3-6.9-41.6-10.5c-3.5-3.8-4-4-5.3-3.3
            c-2.1,1.2-0.8,4.5,0,6.5c2,5.1,10,14.2,23.8,18.7c12.1,4,41.5,6.2,77.2-7.6C312.3,166.7,343.4,123.8,334.3,87.9z M164.6,273.9
            c3,11.1,2.7,21.4-0.4,30.7c-0.3,1-0.7,2.1-1.1,3.1c-0.4,1-0.9,2-1.3,3c-2.4,4.9-5.6,9.6-9.5,13.8c-11.9,13-28.6,17.9-35.8,13.8
            c-7.7-4.5-3.9-22.8,10-37.5c14.9-15.7,36.3-25.9,36.3-25.9l0-0.1C163.3,274.6,164,274.2,164.6,273.9z' 
          ));
        }
      }
    }

    Result:

    Sass logo

    Usage

    The API is simple. There's one mixin: @include svg($type, $attrs).

    • $type (String) is the SVG element type; e.g. for <path />, it would be $type: 'path'.
    • $attrs (Map) are all the attributes for the SVG element, such as $attrs: (fill: white).

    For SVG elements with text inside, such as <text>Hello, world</text>, use the (non-standard) content attribute. E.g. @include svg('text', (content: 'Hello, world'));

    SVG elements can be (infinitely) nested, as well:

    @include svg {
      @include svg('g', (...)) {
        @include svg('path', (...));
        @include svg('rect', (...));
      }
    }

    Always remember to include the root <svg> element! You can simply:

    • @include svg { ... } (which defaults to type: 'svg'), and/or...
    • provide just attributes: @include svg((x: 0, y: 0, ...)) { ... } (which also defaults to type: 'svg').

    Warnings and Notes

    Please note: use this system with caution. While it provides for easy organization, access and editing of SVG within your stylesheets, it can cause performance delays in production due to the data URI encoding of the SVG within the CSS itself. You can read more about this issue here.

    The more complex the SVG, the more code is converted to CSS, thus bloating your output stylesheet. To prevent issues, only use small, non-complex SVG assets and be cognizant of your CSS output.

    Keywords

    none

    Install

    npm i sass-svg

    DownloadsWeekly Downloads

    294

    Version

    1.2.0

    License

    ISC

    Unpacked Size

    11.7 kB

    Total Files

    7

    Last publish

    Collaborators

    • davidkpiano