❤
npm
Sign UpSign In

grunt-svg-css

0.2.9 • Public • Published

grunt-svg-css

NPM version Build Status Build status
Dependency Status devDependency Status

Convert a folder of SVG files into a single file using data-uri.

Getting Started

This plugin requires Grunt ~0.4.1

If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:

npm install grunt-svg-css --save-dev

Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:

grunt.loadNpmTasks('grunt-svg-css');

The "svgcss" task

Overview

In your project's Gruntfile, add a section named svgcss to the data object passed into grunt.initConfig().

grunt.initConfig({
  svgcss: {
    options: {
      // Task-specific options go here.
    },
    your_target: {
      options: {
        // Target-specific options go here.
      },
      // Target-specific file lists and/or options go here.
    },
  }
})

Options

options.eol

Type: String
Default value: null

The line ending you would like to convert to. Defaults to system line endings returned by grunt.util.linefeed.

Optional Values Converts To
'lf' \n
'crlf' \r\n
'cr' \r

options.cssprefix

Type: String
Default value: icon-

A string to prefix all css classes with.

options.csstemplate

Type: String Default value: Goes to the templates/css.hbs file

Location of a handlebars template that will allow you to structure your CSS file the way that you choose. See Handlebars Variables for details on available variables.

Example of css.hbs file contents:

{{#each icons}}
{{#with this}}
{{prefix}}{{name}} { background-image: url("{{datauri}}"); background-repeat: no-repeat; }
{{/with}}
{{/each}}

options.defaultWidth

Type: String
Default: "400px"

A string that MUST be defined in px that will be the size of the PNG if there is no width given in the SVG element.

options.defaultHeight

Type: String
Default: "300px"

Similar to defaultWidth, but for height.

options.previewhtml

Type: String
Default value: "preview.html"

The name of the generated HTML file containing svg data uris. No preview html file will be generated if set to null.

options.previewtemplate

Type: String
Default value: Goes to the templates/preview.hbs file

Takes a path to the template that will be used for the preview.html. See Handlebars Variables for details on available variables.

Example of preview.hbs file contents:

<!doctype HTML>
<html>
<head>
  <title>Icons Preview!</title>
  <style>
    body {
      background-image: linear-gradient(#eee 25%, transparent 25%, transparent), linear-gradient(#eee 25%, transparent 25%, transparent), linear-gradient(transparent 75%, #eee 75%), linear-gradient(transparent 75%, #eee 75%);
      width: 100%;
      background-size: 10px 10px;
    }
  </style> 
  <link href="{{cssfile}}" rel="stylesheet">
</head>
<body>
{{#each icons}}
  {{#with this}}
  <pre><code>{{prefix}}{{name}}:</code></pre><div class="{{prefixClass}}{{name}}" style="width: {{width}}; height: {{height}};" ></div><hr/>
  {{/with}}
{{/each}}
</body>
</html>

options.banner

Type: String
Default: ""

Prepend the specified string to the output file. Useful for licensing information.

options.footer

Type: String
Default: ""

Append the specified string to the output file.

options.footer

Type: String
Default: ""

Append the specified string to the output file.

options.minifycss

Type: Boolean
Default: false

If true minify CSS output using clean-css.

options.insertfinalnewline

Type: Boolean
Default: false

If true output files will end with a newline.

options.keepSpecialComments

Type: String Number
Default: '*'

To keep or remove special comments, exposing the underlying option from clean-css. '*' for keeping all (default), 1 for keeping first one only, 0 for removing all.

Handlebars Variables

These are the variables that are made available to the Handlebars template for the CSS and Preview templates.

An drag-handle.svg will generate the following icons object.

icons: [
    {
        name: 'drag-handle',
        datauri: 'data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22iso-8859-1%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%20Tiny%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11-tiny.dtd%22%3E%3Csvg%20version%3D%221.1%22%20baseProfile%3D%22tiny%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20%20x%3D%220px%22%20y%3D%220px%22%20width%3D%226px%22%20height%3D%2210px%22%20viewBox%3D%220%200%206%2010%22%20xml%3Aspace%3D%22preserve%22%3E%3Crect%20fill%3D%22%23CDCCCC%22%20width%3D%222%22%20height%3D%222%22%2F%3E%3Crect%20x%3D%224%22%20fill%3D%22%23CDCCCC%22%20width%3D%222%22%20height%3D%222%22%2F%3E%3Crect%20y%3D%224%22%20fill%3D%22%23CDCCCC%22%20width%3D%222%22%20height%3D%222%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%224%22%20fill%3D%22%23CDCCCC%22%20width%3D%222%22%20height%3D%222%22%2F%3E%3Crect%20y%3D%228%22%20fill%3D%22%23CDCCCC%22%20width%3D%222%22%20height%3D%222%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%228%22%20fill%3D%22%23CDCCCC%22%20width%3D%222%22%20height%3D%222%22%2F%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3C%2Fsvg%3E',
        prefix: '.icon-',
        prefixClass: 'icon-',
        width: '6px',
        height: '10px'
    }
]
  • icons: An array of icons.
    • name: SVG name without the extension.
    • datauri: The datauri of the svg.
    • prefix: The prefix to use for the class name in the css file.
    • prefixClass: The prefix to use for hte class name in the preview file.
    • width: The width of the SVG, defaults to '400px' if it's undefined.
    • height: The height of the SVB, defaults to '300px' if it's undefined.

Usage Examples

Default Options

In this example, the default options are used to convert a folder of SVG's to a single css file.

grunt.initConfig({
  svgcss: {
    defaultOptions: {
      files: {
        'tmp/defaultOptions.css': ['test/fixtures/*.svg']
      }
    }
  }
})

Custom Options

In this example, custom options are used to convert all files to crlf.

grunt.initConfig({
  svgcss: {
    toCrlf: {
      options: {
        eol: 'crlf',
        previewhtml: 'toCrlf.html'
      },
      files: {
        'tmp/toCrlf.css': ['test/fixtures/*.svg']
      }
    }
  }
})

See this packages Gruntfile.js for more usage examples.

Contributing

In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using Grunt.

Versions

Current Tags

  • Version
    Downloads (Last 7 Days)
    • Tag
  • 0.2.9
    75
    • latest

Version History

Package Sidebar

Install

npm i grunt-svg-css

Repository

github.com/psyrendust/grunt-svg-css

Homepage

github.com/psyrendust/grunt-svg-css

Weekly Downloads

76

Version

0.2.9

License

none

Last publish

Collaborators

  • psyrendust
Try on RunKit
Report malware