<commit_before># Sass-Inline-Svg

Inline url-encoded SVG with Sass. Optional variable string replacement included!


## Installation

    gem install sass_inline_svg

Add this line to your application's Gemfile:

    gem 'sass_inline_svg'



## Usage

Sass-inline-svg adds a `inline-svg` function you can use with Sass. It url-encodes the contents of the specified file and inlines it in your CSS.

###Basic

    .my-thing {
        background-image: inline-svg('my-file.svg');
    }

###Replace Variable Strings

Replacing variable strings in SVG when inlining them with Sass makes sense e.g. if you need multiple variants of the same graphic with different fill colors.

With Sass-Inline-Svg you only need one source svg file with a variable string for `fill`:

	…
	<polygon fill="fillcolor" points="29.43 25.19 20.24 16 29.43 6.81 25.19 2.57 16 11.76 6.81 2.57 2.57 6.81 11.76 16 2.57 25.19 6.81 29.44 16 20.24 25.19 29.44 "/>
	…

The variants needed can be created during inlinig with Sass. Pass a Sass map of replacements as a second parameter:

    .my-thing {
        background-image: inline-svg('my-file.svg', ( fillcolor: '#fff' ));
    }

This will replace all occurences of `fillcolor` in your SVG with `#fff`.

__Note:__ If you use `$`- or `@`-prefixed variable names in your SVG, you'll have to quote the keys in your raplement Sass map:

    .my-thing {
        background-image: inline-svg('my-file.svg', ( '$fillcolor': '#fff' ));
    }
<commit_msg>RM update<commit_after># Sass-Inline-Svg

[![Gem Version](https://badge.fury.io/rb/sass_inline_svg.svg)](http://badge.fury.io/rb/sass_inline_svg)

Inline url-encoded SVG with Sass. Optional variable string replacement included!


## Installation

    gem install sass_inline_svg

Add this line to your application's Gemfile:

    gem 'sass_inline_svg'



## Usage

Sass-inline-svg adds a `inline-svg` function you can use with Sass. It url-encodes the contents of the specified file and inlines it in your CSS.

###Basic

    .my-thing {
        background-image: inline-svg('my-file.svg');
    }

###Replace Variable Strings

Replacing variable strings in SVG when inlining them with Sass makes sense e.g. if you need multiple variants of the same graphic with different fill colors.

With Sass-Inline-Svg you only need __one__ source svg file with a variable string for `fill`:

	…
	<polygon fill="fillcolor" points="29.43 25.19 20.24 16 29.43 6.81 25.19 2.57 16 11.76 6.81 2.57 2.57 6.81 11.76 16 2.57 25.19 6.81 29.44 16 20.24 25.19 29.44 "/>
	…

The variants needed can be created during inlinig with Sass. Pass a Sass map of replacements as a second parameter:

    .my-thing {
        background-image: inline-svg('my-file.svg', ( fillcolor: '#fff' ));
    }

This will replace all occurences of `fillcolor` in your SVG with `#fff`.

__Note:__ If you use `$`- or `@`-prefixed variable names in your SVG, you'll have to quote the keys in your raplement Sass map:

    .my-thing {
        background-image: inline-svg('my-file.svg', ( '$fillcolor': '#fff' ));
    }

{'fraction_non_alphanumeric': 0.10602568324003951, 'fraction_numerical': 0.052683569311820874, 'mean_word_length': 3.3276353276353277, 'pattern_counts': {'":': 0, '<': 5, '<?xml version=': 0, '>': 5, 'https://': 1, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7330706', 'n_tokens_mistral': 1143, 'n_tokens_neox': 989, 'n_words': 383}