gulp-svgcombiner's Introduction

gulp-svgcombiner

A gulp plugin for svgcombiner

Usage

First, install gulp-svgcombiner as a development dependency:

npm install --save-dev gulp-svgcombiner

Then, add it to your gulpfile.js:

Combine SVGs in two directories

If you have a directory structure such as:

├── gulpfile.js
└── icons/
    └── medium/
    |   └── [email protected]
    └── large/
        └── [email protected]

You could configure gulp-svgcombiner as follows:

gulp.src('icons/**/*.svg')
  .pipe(svgcombiner({
    processName: function(filePath) {
      // Add a prefix and extra the icon name from the fileName
      return 'icon-' + fileName.replace(/S_UI(.*?)_.*/, '$1');
    },
    processClass: function(filePath) {
      return 'icon-' + path.dirname(filePath).split(path.sep).pop();
    }
  }))
  .pipe(gulp.dest('dist/icons/'));

The result would be

└── dist/
    └── icons/
        └── CheckboxCheckmark.svg

CheckboxCheckmark.svg would have the following contents:

<svg xmlns="http://www.w3.org/2000/svg" id="icon-CheckboxCheckmark">
  <path d="M10.5,3.50771A1,1,0,0,0,8.7927,2.801L4.75,6.84361,3.2073,5.301A1,1,0,0,0,1.76872,6.69043L4.0433,8.965a1,1,0,0,0,1.4141,0l4.75-4.75A.99672.99672,0,0,0,10.5,3.50771Z" class="icon-medium"/>
  <path d="M12,2.50126a1,1,0,0,0-1.7073-.708L4.5,7.5859,2.2073,5.2933a1,1,0,1,0-1.414,1.414L3.7927,9.7067a1,1,0,0,0,1.4147,0l6.4994-6.4994A.99669.99669,0,0,0,12,2.50126Z" class="icon-large"/>
</svg>

Assuming you've embeded this SVG in the page and referenced the symbol with <use>:

<div class="checkbox">
  <svg class="icon" focusable="false" aria-hidden="true">
    <use xlink:href="#icon-CheckboxCheckmark"></use>
  </svg>
</div>

You could then use the following CSS to switch between the medium and large icons:

/* Hide all icons by default */
.icon-medium,
.icon-large {
  display: none;
}

/* Show the large icons when in large mode */
.ui-large .icon-large {
  display: inline;
}

/* Show the medium icons when in medium mode */
.ui-medium .icon-medium {
  display: inline;
}

Or, you could use media queries to switch between icon sets:

// Show medium icons by default
.icon-medium {
  display: inline;
}

.icon-large {
  display: none;
}

@media (min-width:480px) {
  // Show the large icons on small screens
  .icon-large {
    display: inline;
  }

  .ui-medium .icon-medium {
    display: none;
  }
}

API

svgcombiner([options])

options

Type: Object

options.processName(filePath)

Type: function
Default: Strip file extension

This function serves two purposes:

Normalize naming differences between icons
Name your icons

For instance, if you have an icon naming convention that includes the size of the icon, your processName function should remove the size of the icon from the name, as well as strip the extension and any other irrelevant text.

Contributing

Contributions are welcomed! Read the Contributing Guide for more information.

Licensing

This project is licensed under the Apache V2 License. See LICENSE for more information.

gulp-svgcombiner's People

Contributors

Stargazers

Watchers

gulp-svgcombiner's Issues

Files passed down stream do not include path information

gulpfile task configuration

gulp.task('generate-svgsprite', function() {
  return gulp.src('icons/**/*.svg')
    .pipe(svgmin())
    .pipe(svgcombiner())
    .pipe(svgstore({
      inlineSvg: true
    }))
    .pipe(rename('spectrum-css-icons.svg'))
    .pipe(gulp.dest('dist/icons/'));
});

Expected Behavior

Should have had a sweet sprite sheet.

Actual Behavior

[10:41:46] 'generate-svgsprite' errored after 308 ms
[10:41:46] Error: No path specified! Can not get relative.
    at File.get (/Users/lawdavis/repos/spectrum-css/node_modules/vinyl/index.js:227:13)
    at Transform.transform [as _transform] (/Users/lawdavis/repos/spectrum-css/node_modules/gulp-svgstore/index.js:45:37)

Version

gulp version: 4.0.0
svgcombiner version: 1.0.0

Checklist

I searched for a duplicate issue first
I included task configuration, error output, input files, output files, and version numbers
I removed other plugins from the stream and reproduced the issue
I'm not using this issue tracker to get help, or if I am, I already posted on StackOverflow and got no response

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on Greenkeeper branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please click the 'fix repo' button on account.greenkeeper.io.

Recommend Projects

adobe / gulp-svgcombiner Goto Github PK