Skip to content

Commit

Permalink
Merge pull request #109 from w0rm/update-dependencies
Browse files Browse the repository at this point in the history 
Update dependencies
  • Loading branch information
@w0rm
w0rm authored Jun 19, 2021
2 parents d91321a + 57c28bd commit 2529930
Show file tree
Hide file tree
Showing 7 changed files with 244 additions and 285 deletions.
26 changes: 26 additions & 0 deletions .github/workflows/test.yml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
name: Test

on:
push:
branches: [main]
pull_request:
branches: [main]

jobs:
npm-test:
runs-on: ubuntu-latest

strategy:
matrix:
node-version: ['10', '12', '14']

steps:
- uses: actions/checkout@v2

- uses: actions/setup-node@v1
with:
node-version: ${{ matrix.node-version }}

- run: |
npm install
npm test
12 changes: 0 additions & 12 deletions .travis.yml
View file

This file was deleted.

93 changes: 49 additions & 44 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
gulp-svgstore [![Build Status](https://travis-ci.org/w0rm/gulp-svgstore.svg?branch=master)](https://travis-ci.org/w0rm/gulp-svgstore)
gulp-svgstore ![Build Status](https://github.com/w0rm/gulp-svgstore/actions/workflows/test.yml/badge.svg?branch=main)
=============


<img align="right" width="130" height="175"
title="SVG Superman"
src="https://raw.githubusercontent.com/w0rm/gulp-svgstore/master/svg-superman.png">
Expand Down Expand Up @@ -40,16 +41,16 @@ Additionally pass through [gulp-svgmin](https://github.com/ben-eb/gulp-svgmin)
to minify svg and ensure unique ids.

```js
var gulp = require('gulp');
var svgstore = require('gulp-svgstore');
var svgmin = require('gulp-svgmin');
var path = require('path');
const gulp = require('gulp');
const svgstore = require('gulp-svgstore');
const svgmin = require('gulp-svgmin');
const path = require('path');

gulp.task('svgstore', function () {
gulp.task('svgstore', () => {
return gulp
.src('test/src/*.svg')
.pipe(svgmin(function (file) {
var prefix = path.basename(file.relative, path.extname(file.relative));
.pipe(svgmin((file) => {
const prefix = path.basename(file.relative, path.extname(file.relative));
return {
plugins: [{
cleanupIDs: {
Expand Down Expand Up @@ -79,12 +80,12 @@ In your html file (using [`sr-only` from html5-boilerplate](https://github.com/h
In your gulp tasks:

```js
var gulp = require('gulp');
var svgstore = require('gulp-svgstore');
var inject = require('gulp-inject');
const gulp = require('gulp');
const svgstore = require('gulp-svgstore');
const inject = require('gulp-inject');

gulp.task('svgstore', function () {
var svgs = gulp
gulp.task('svgstore', () => {
const svgs = gulp
.src('test/src/*.svg')
.pipe(svgstore({ inlineSvg: true }));

Expand All @@ -107,11 +108,11 @@ because id should be unique.
If you need to add prefix to each id, please use `gulp-rename`:

```js
var gulp = require('gulp');
var rename = require('gulp-rename');
var svgstore = require('gulp-svgstore');
const gulp = require('gulp');
const rename = require('gulp-rename');
const svgstore = require('gulp-svgstore');

gulp.task('default', function () {
gulp.task('default', () => {
return gulp
.src('src/svg/**/*.svg', { base: 'src/svg' })
.pipe(rename({prefix: 'icon-'}))
Expand All @@ -126,16 +127,16 @@ e.g. `src/svg/one/two/three/circle.svg` becomes `one-two-three-circle`.


```js
var gulp = require('gulp');
var path = require('path');
var rename = require('gulp-rename');
var svgstore = require('gulp-svgstore');
const gulp = require('gulp');
const path = require('path');
const rename = require('gulp-rename');
const svgstore = require('gulp-svgstore');

gulp.task('default', function () {
gulp.task('default', () => {
return gulp
.src('src/svg/**/*.svg', { base: 'src/svg' })
.pipe(rename(function (file) {
var name = file.dirname.split(path.sep);
.pipe(rename((file) => {
const name = file.dirname.split(path.sep);
name.push(file.basename);
file.basename = name.join('-');
}))
Expand Down Expand Up @@ -167,15 +168,15 @@ An example below removes all fill attributes from svg sources before combining t
Please note that you have to set `xmlMode: true` to parse svgs as xml file.

```js
var gulp = require('gulp');
var svgstore = require('gulp-svgstore');
var cheerio = require('gulp-cheerio');
const gulp = require('gulp');
const svgstore = require('gulp-svgstore');
const cheerio = require('gulp-cheerio');

gulp.task('svgstore', function () {
gulp.task('svgstore', () => {
return gulp
.src('test/src/*.svg')
.pipe(cheerio({
run: function ($) {
run: ($) => {
$('[fill]').removeAttr('fill');
},
parserOptions: { xmlMode: true }
Expand All @@ -193,17 +194,17 @@ nothing, best method is to use the [method show above](#inlining-svgstore-result
```js
var gulp = require('gulp');
var svgstore = require('gulp-svgstore');
var cheerio = require('gulp-cheerio');
const gulp = require('gulp');
const svgstore = require('gulp-svgstore');
const cheerio = require('gulp-cheerio');

gulp.task('svgstore', function () {
gulp.task('svgstore', () => {
return gulp
.src('test/src/*.svg')
.pipe(svgstore({ inlineSvg: true }))
.pipe(cheerio({
run: function ($) {
$('svg').attr('style', 'display:none');
run: ($) => {
$('svg').attr('style', 'display:none');
},
parserOptions: { xmlMode: true }
}))
Expand All @@ -218,25 +219,25 @@ You can extract data with cheerio.
The following example extracts viewBox and id from each symbol in combined svg.
```js
var gulp = require('gulp');
var Vinyl = require('vinyl');
var svgstore = require('gulp-svgstore');
var through2 = require('through2');
var cheerio = require('cheerio');
const gulp = require('gulp');
const Vinyl = require('vinyl');
const svgstore = require('gulp-svgstore');
const through2 = require('through2');
const cheerio = require('cheerio');

gulp.task('metadata', function () {
gulp.task('metadata', () => {
return gulp
.src('test/src/*.svg')
.pipe(svgstore())
.pipe(through2.obj(function (file, encoding, cb) {
var $ = cheerio.load(file.contents.toString(), {xmlMode: true});
var data = $('svg > symbol').map(function () {
const $ = cheerio.load(file.contents.toString(), {xmlMode: true});
const data = $('svg > symbol').map(() => {
return {
name: $(this).attr('id'),
viewBox: $(this).attr('viewBox')
};
}).get();
var jsonFile = new Vinyl({
const jsonFile = new Vinyl({
path: 'metadata.json',
contents: Buffer.from(JSON.stringify(data))
});
Expand Down Expand Up @@ -291,6 +292,10 @@ Another possible solution would be to write a transformation with [gulp-cheerio]
## Changelog
* 8.0.0
* Update dependencies
* Drop support for node < 10
* 7.0.1
* Include xmlns:xlink in svg definition #96
Expand Down
26 changes: 10 additions & 16 deletions gulpfile.js
View file
Original file line number Diff line number Diff line change
@@ -1,33 +1,27 @@
var svgstore = require('./index')
var gulp = require('gulp')
var inject = require('gulp-inject')
const svgstore = require('./index')
const gulp = require('gulp')
const inject = require('gulp-inject')


gulp.task('external', function () {

return gulp
gulp.task('external', () =>
gulp
.src('test/src/*.svg')
.pipe(svgstore())
.pipe(gulp.dest('test/dest'))
)

})


gulp.task('inline', function () {

function fileContents (filePath, file) {
gulp.task('inline', () => {
function fileContents (_, file) {
return file.contents.toString('utf8')
}

var svgs = gulp
const svgs = gulp
.src('test/src/*.svg')
.pipe(svgstore({ inlineSvg: true }))

return gulp
.src('test/src/inline-svg.html')
.pipe(inject(svgs, { transform: fileContents }))
.pipe(gulp.dest('test/dest'))

})

gulp.task('build', ['external', 'inline'])
gulp.task('build', gulp.series(['external', 'inline']))
60 changes: 30 additions & 30 deletions index.js
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,21 @@
var cheerio = require('cheerio')
var path = require('path')
var Stream = require('stream')
var fancyLog = require('fancy-log')
var PluginError = require('plugin-error')
var Vinyl = require('vinyl')
const cheerio = require('cheerio')
const path = require('path')
const Stream = require('stream')
const fancyLog = require('fancy-log')
const PluginError = require('plugin-error')
const Vinyl = require('vinyl')

module.exports = function (config) {

config = config || {}

var namespaces = {}
var isEmpty = true
var fileName
var inlineSvg = config.inlineSvg || false
var ids = {}
const namespaces = {}
let isEmpty = true
let fileName
const inlineSvg = config.inlineSvg || false
const ids = {}

var resultSvg = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs/></svg>'
let resultSvg = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs/></svg>'
if (!inlineSvg) {
resultSvg =
'<?xml version="1.0" encoding="UTF-8"?>' +
Expand All @@ -24,12 +24,12 @@ module.exports = function (config) {
resultSvg
}

var $ = cheerio.load(resultSvg, { xmlMode: true })
var $combinedSvg = $('svg')
var $combinedDefs = $('defs')
var stream = new Stream.Transform({ objectMode: true })
const $ = cheerio.load(resultSvg, { xmlMode: true })
const $combinedSvg = $('svg')
const $combinedDefs = $('defs')
const stream = new Stream.Transform({ objectMode: true })

stream._transform = function transform (file, encoding, cb) {
stream._transform = function transform (file, _, cb) {

if (file.isStream()) {
return cb(new PluginError('gulp-svgstore', 'Streams are not supported!'))
Expand All @@ -38,14 +38,14 @@ module.exports = function (config) {
if (file.isNull()) return cb()


var $svg = cheerio.load(file.contents.toString(), { xmlMode: true })('svg')
const $svg = cheerio.load(file.contents.toString(), { xmlMode: true })('svg')

if ($svg.length === 0) return cb()

var idAttr = path.basename(file.relative, path.extname(file.relative))
var viewBoxAttr = $svg.attr('viewBox')
var preserveAspectRatioAttr = $svg.attr('preserveAspectRatio')
var $symbol = $('<symbol/>')
const idAttr = path.basename(file.relative, path.extname(file.relative))
const viewBoxAttr = $svg.attr('viewBox')
const preserveAspectRatioAttr = $svg.attr('preserveAspectRatio')
const $symbol = $('<symbol/>')

if (idAttr in ids) {
return cb(new PluginError('gulp-svgstore', 'File name should be unique: ' + idAttr))
Expand Down Expand Up @@ -74,11 +74,11 @@ module.exports = function (config) {
$symbol.attr('preserveAspectRatio', preserveAspectRatioAttr)
}

var attrs = $svg[0].attribs
for (var attrName in attrs) {
const attrs = $svg[0].attribs
for (let attrName in attrs) {
if (attrName.match(/xmlns:.+/)) {
var storedNs = namespaces[attrName]
var attrNs = attrs[attrName]
const storedNs = namespaces[attrName]
const attrNs = attrs[attrName]

if (storedNs !== undefined) {
if (storedNs !== attrNs) {
Expand All @@ -89,7 +89,7 @@ module.exports = function (config) {
)
}
} else {
for (var nsName in namespaces) {
for (let nsName in namespaces) {
if (namespaces[nsName] === attrNs) {
fancyLog.info(
'Same namespace value under different names : ' +
Expand All @@ -105,7 +105,7 @@ module.exports = function (config) {
}
}

var $defs = $svg.find('defs')
const $defs = $svg.find('defs')
if ($defs.length > 0) {
$combinedDefs.append($defs.contents())
$defs.remove()
Expand All @@ -121,10 +121,10 @@ module.exports = function (config) {
if ($combinedDefs.contents().length === 0) {
$combinedDefs.remove()
}
for (var nsName in namespaces) {
for (let nsName in namespaces) {
$combinedSvg.attr(nsName, namespaces[nsName])
}
var file = new Vinyl({ path: fileName, contents: Buffer.from($.xml()) })
const file = new Vinyl({ path: fileName, contents: Buffer.from($.xml()) })
this.push(file)
cb()
}
Expand Down
Loading

0 comments on commit 2529930

Please sign in to comment.