JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 1
  • Score
    100M100P100Q31255F
  • License MIT

Render feathericons on the server-side using gulp

Package Exports

  • gulp-feather
  • gulp-feather/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (gulp-feather) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

gulp-feather

version Test Package

What is gulp-feather

This package allows you to use Feather without executing any JavaScript on the client-side by rendereing icons on the server-side using jsdom with gulp.

Install

$ npm install --save-dev gulp-feather

Usage

Note: This is directly copied from the API Reference of Feather

featherify([attrs])

Replaces all elements that have a data-feather attribute with SVG markup corresponding to the element's data-feather attribute value.

Parameters

Name Type Description
attrs (optional) Object Key-value pairs in the attrs object will be mapped to HTML attributes on the <svg> tag (e.g. { foo: 'bar' } maps to foo="bar"). All default attributes on the <svg> tag can be overridden with the attrs object.

Usage

Simple usage:

gulpfile.js

const gulp = require('gulp');
const featherify = require('gulp-feather');

gulp.task('html', function () {
  gulp.src('./*.html')
    .pipe(featherify())
    .pipe(gulp.dest('./dest'));
});

gulp.task('default', ['html']);

index.html

<i data-feather="circle"></i>

dest/index.html

<svg class="feather feather-circle" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle></svg>

You can pass featherify an attrs object:

gulpfile.js

const gulp = require('gulp');
const featherify = require('gulp-feather');

gulp.task('html', function () {
  gulp.src('./*.html')
    .pipe(featherify({ class: 'foo bar', 'stroke-width': 1 }))
    .pipe(gulp.dest('./dest'));
});

gulp.task('default', ['html']);

index.html

<i data-feather="circle"></i>

dist/index.html

<svg class="feather feather-circle foo bar" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle></svg>

All attributes on the placeholder element (i.e. <i>) will be copied to the <svg> tag:

gulpfile.js

const gulp = require('gulp');
const featherify = require('gulp-feather');

gulp.task('html', function () {
  gulp.src('./*.html')
    .pipe(featherify())
    .pipe(gulp.dest('./dest'));
});

gulp.task('default', ['html']);

index.html

<i data-feather="circle" id="my-circle" class="foo bar" stroke-width="1"></i>

dist/index.html

<svg id="my-circle" class="feather feather-circle foo bar" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle></svg>

License

MIT © oToToT