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: 10 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 (over 5 years ago)
- Default Branch: main
- Last Pushed: 2025-07-28T20:22:00.000Z (11 months ago)
- Last Synced: 2025-08-09T07:34:48.796Z (10 months ago)
- Topics: feather, feathericons, gulp, gulp-plugin, gulpplugin
- Language: JavaScript
- Homepage: https://npmjs.com/gulp-feather
- Size: 306 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# gulp-feather
[](https://www.npmjs.com/package/gulp-feather)
## 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)