https://github.com/ototot/gulp-feather

Render feathericons on the server-side using gulp
https://github.com/ototot/gulp-feather

feather feathericons gulp gulp-plugin gulpplugin

Last synced: 3 months ago
JSON representation

Render feathericons on the server-side using gulp

• Host: GitHub
• URL: https://github.com/ototot/gulp-feather
• Owner: oToToT
• License: mit
• Created: 2020-11-30T18:43:03.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2024-07-20T17:09:30.000Z (6 months ago)
• Last Synced: 2024-10-05T23:12:46.552Z (3 months ago)
• Topics: feather, feathericons, gulp, gulp-plugin, gulpplugin
• Language: JavaScript
• Homepage: https://npmjs.com/gulp-feather
• Size: 164 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# gulp-feather

[![version](https://img.shields.io/npm/v/gulp-feather?color=brightgreen&label=version)](https://www.npmjs.com/package/gulp-feather)

![Test Package](https://github.com/oToToT/gulp-feather/workflows/CI/badge.svg)

## What is gulp-feather

This package allows you to use [Feather](https://github.com/feathericons/feather) without executing any JavaScript on the client-side by rendereing icons on the server-side using [jsdom](https://github.com/jsdom/jsdom) with [gulp](https://gulpjs.com/).

## Install

```bash

$ npm install --save-dev gulp-feather

```

## Usage

> **Note:** This is directly copied from the [API Reference of Feather](https://github.com/feathericons/feather/blob/b15b4a7535d83172d7dee408b4cf099b0550bdcb/README.md)

### `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 `` tag (e.g. `{ foo: 'bar' }` maps to `foo="bar"`). All default attributes on the `` tag can be overridden with the `attrs` object. |

#### Usage

Simple usage:

`gulpfile.js`

```javascript

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`

```html



```

`dest/index.html`

```html

```

You can pass `featherify` an `attrs` object:

`gulpfile.js`

```javascript

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`

```html



```

`dist/index.html`

```html

```

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


`gulpfile.js`

```javascript

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`

```html



```

`dist/index.html`

```html

```

## License

[MIT](https://github.com/oToToT/gulp-feather/blob/main/LICENSE) © [oToToT](https://github.com/oToToT)