Compare commits

..

59 Commits

Author SHA1 Message Date
61803f2129 feat: Add coffee icon 2018-10-27 21:05:59 -07:00
8aec53b331 docs: Update issue templates
* Create icon_request.md

* Delete ISSUE_TEMPLATE.md

* Create bug_report.md

* creating an example bug report

* Using same bug report from issue template
2018-07-18 18:34:53 -07:00
156c0919c9 docs: Add info about SVG attributes 2018-05-21 14:04:00 -07:00
179b482c03 build: Use promises in algolia script 2018-05-18 19:08:46 -07:00
a23698d5be build: Initialize tmp index settings 2018-05-18 18:08:14 -07:00
fb057f1f94 build: Initialize algolia settings in script 2018-05-18 18:06:19 -07:00
21bb9fe6d6 build: Only copy settings to tmp index 2018-05-18 17:55:24 -07:00
c63f478ff5 chore: Remove console.log 2018-05-18 17:47:05 -07:00
b424fa779d build: Add logs to sync-algolia script 2018-05-18 17:41:39 -07:00
01698dea84 Merge branch 'master' of https://github.com/feathericons/feather 2018-05-18 17:23:29 -07:00
ae8e149850 build: Refactor algolia script to reindex data atomically 2018-05-18 17:23:23 -07:00
9f49fd9560 Merge pull request #415 from feathericons/dependabot/npm_and_yarn/core-js-2.5.6
build: bump core-js from 2.5.3 to 2.5.6
2018-05-18 17:01:29 -07:00
742f452232 docs: Update README.md 2018-05-18 16:59:19 -07:00
962870d51c chore: Fix security vulnerabilities 2018-05-18 16:41:56 -07:00
ba1b12a712 Merge branch 'master' of https://github.com/feathericons/feather 2018-05-18 16:35:01 -07:00
5045ec3b78 chore: Add comment to sync-algolia script 2018-05-18 16:34:56 -07:00
0d65b5761b build: Use npx in build script 2018-05-18 16:34:26 -07:00
fcf9aec131 docs: Update unpkg links 2018-05-18 16:20:16 -07:00
2ee03d261c fix: Set unpkg default to feather.min.js 2018-05-18 16:13:35 -07:00
dc3c0cc47e style: Fix formatting 2018-05-18 16:07:18 -07:00
d5ba74d93b fix: Fix UMD build for node
Prevents webpack from referencing `window` in the UMD build which was causing an error in node.
2018-05-18 16:07:18 -07:00
9b157b399d build: bump core-js from 2.5.3 to 2.5.6
Bumps [core-js](https://github.com/zloirock/core-js) from 2.5.3 to 2.5.6.
- [Release notes](https://github.com/zloirock/core-js/releases)
- [Changelog](https://github.com/zloirock/core-js/blob/master/CHANGELOG.md)
- [Commits](https://github.com/zloirock/core-js/compare/v2.5.3...v2.5.6)

Signed-off-by: dependabot[bot] <support@dependabot.com>
2018-05-18 19:28:17 +00:00
c978b1cb4e fix: Remove unused polyfills and update build config
Removes polyfills for `Object.assign` and `Set` which, as far as I can tell, are unused in the
codebase. Updates `webpack` from 3 to 4. Replaces `babel-preset-es2015` with `babel-preset-env`.
Reduces the minified bundle size (`feather.min.js`) by **9.3kB** (72.4kB to 63.1kB). Does not change
any functionality of the library.
2018-05-18 12:26:21 -07:00
bd129d9dcf docs: Update function documentation 2018-05-18 10:17:40 -07:00
90133ea33e build(algolia): Add objects *after* clearing index 2018-05-17 23:44:35 -07:00
1a210808c5 docs: Update roadmap 2018-05-17 23:27:24 -07:00
400f34afc2 docs: Update shields 2018-05-17 23:25:51 -07:00
1da9dd43b2 test: Track code coverage 2018-05-17 23:19:02 -07:00
6e7693e6da test: Update test scripts 2018-05-17 23:12:06 -07:00
32810336ec test: Test replace() in node env 2018-05-17 23:08:17 -07:00
e374f72cb6 chore: Add coverage to .eslintignore 2018-05-17 23:07:53 -07:00
28e74c6e2b chore: Ignore coverage directory 2018-05-17 22:46:01 -07:00
3183ae1ef6 chore: Remove unneeded eslint comments 2018-05-17 22:43:41 -07:00
703b1a7882 build: Update build logs 2018-05-17 22:42:08 -07:00
9dffc53b3a ci: Fix "all" script in .travis.yml 2018-05-17 22:30:32 -07:00
741ac5632c chore: Replace @commitlint/config-angular with @commitlint/config-conventional 2018-05-17 22:29:21 -07:00
ad3c8a94d0 ci: Rename "start" script to "all" 2018-05-17 22:24:38 -07:00
76f29d8565 build: Disable some eslint rules in /bin 2018-05-17 22:21:17 -07:00
23b17b9c55 Merge branch 'master' of https://github.com/feathericons/feather 2018-05-17 21:52:27 -07:00
1d3283d81d build: Add sync-algolia script 2018-05-17 21:51:49 -07:00
5031cacbdd docs: Lowercase donate badge 2018-05-16 11:53:13 -07:00
894dcfd6a6 Merge pull request #393 from feathericons/dependabot/npm_and_yarn/eslint-plugin-import-2.11.0
build: bump eslint-plugin-import from 2.8.0 to 2.11.0
2018-05-13 22:32:36 -07:00
765985a5e3 Merge pull request #412 from feathericons/dependabot/npm_and_yarn/npm-run-all-4.1.3
build: bump npm-run-all from 4.1.2 to 4.1.3
2018-05-07 18:53:58 -04:00
87f272275a Merge pull request #396 from feathericons/dependabot/npm_and_yarn/html-minifier-3.5.15
build: bump html-minifier from 3.5.8 to 3.5.15
2018-05-07 18:53:27 -04:00
17fb9c99a9 build: bump npm-run-all from 4.1.2 to 4.1.3
Bumps [npm-run-all](https://github.com/mysticatea/npm-run-all) from 4.1.2 to 4.1.3.
- [Release notes](https://github.com/mysticatea/npm-run-all/releases)
- [Commits](https://github.com/mysticatea/npm-run-all/compare/v4.1.2...v4.1.3)

Signed-off-by: dependabot[bot] <support@dependabot.com>
2018-05-07 05:50:08 +00:00
9167bfc36d docs: Add donate shield to README 2018-04-25 12:43:52 -07:00
fb0ae8054e build: bump html-minifier from 3.5.8 to 3.5.15
Bumps [html-minifier](https://github.com/kangax/html-minifier) from 3.5.8 to 3.5.15.
- [Release notes](https://github.com/kangax/html-minifier/releases)
- [Commits](https://github.com/kangax/html-minifier/compare/v3.5.8...v3.5.15)

Signed-off-by: dependabot[bot] <support@dependabot.com>
2018-04-17 05:25:12 +00:00
d2369242f1 build: bump eslint-plugin-import from 2.8.0 to 2.11.0
Bumps [eslint-plugin-import](https://github.com/benmosher/eslint-plugin-import) from 2.8.0 to 2.11.0.
- [Release notes](https://github.com/benmosher/eslint-plugin-import/releases)
- [Changelog](https://github.com/benmosher/eslint-plugin-import/blob/master/CHANGELOG.md)
- [Commits](https://github.com/benmosher/eslint-plugin-import/compare/v2.8.0...v2.11.0)

Signed-off-by: dependabot[bot] <support@dependabot.com>
2018-04-13 05:20:04 +00:00
d33cb6ecf9 refactor: Use uppercase for default attrs import 2018-04-04 11:46:37 -07:00
b22f3b4515 Merge pull request #374 from feathericons/update-sprite
Refactor buildSpriteString and update sprite docs
2018-04-01 17:27:55 -07:00
94531bbe7c docs: Update sprite docs 2018-04-01 17:04:44 -07:00
a3527829b8 chore: Add comments to build script 2018-04-01 16:26:54 -07:00
e697b3a927 refactor: Refactor build-sprite-string.js 2018-04-01 16:25:21 -07:00
920bd45776 docs: Rename Client-side Javascript section 2018-03-21 14:49:14 -07:00
cbd3c6184b docs: Clarify dot vs bracket notation 2018-03-21 14:46:33 -07:00
93dd65f8c5 feat: Add archive icon 2018-03-01 23:05:04 -08:00
031f305c83 feat: Add icon 2018-03-01 23:05:04 -08:00
1180d2d8b4 feat: Add gift icon 2018-03-01 23:05:04 -08:00
3422f0aaf7 feat: Add SVG sprite support (#319) 2018-02-20 16:30:59 -08:00
34 changed files with 9455 additions and 3703 deletions

View File

@ -1,4 +1,13 @@
{
"presets": ["es2015"],
"plugins": ["transform-object-rest-spread"]
"presets": [
[
"env",
{
"targets": {
"browsers": ["last 2 versions"]
}
}
],
"stage-2"
]
}

View File

@ -1 +1,2 @@
dist
dist
coverage

View File

@ -1,10 +0,0 @@
<!--
If you'd like to request an icon, please provide the following information:
- icon name
- at least one use case
- screenshots of similar icons
Please create one issue for each icon request.
-->

67
.github/ISSUE_TEMPLATE/bug_report.md vendored Normal file
View File

@ -0,0 +1,67 @@
---
name: Bug report
about: Create a report to help us improve
---
<!--
Before reporting an issue, please search to see if someone has filed a similar issue before. If there is already an open issue, please add a 👍 and/or leave a comment with additional information.
-->
## Prerequisites
* Version:
* Are you running from source/master:
* Are you using a released build:
* Operating system:
* Bits:
## Step to reproduce
*(Type here)*
### Actual behavior
## Any message or error
*(Type here)*
## Resources
* Links
* Screenshots
Here is what a great bug report would look like:
```
## Prerequisites
Version: Release v3.1.0
Running from: Import using webpack
Operating system: Mac OSX
Bits: 64 bits
## Step to reproduce
- Import `check` icon
- Add to a React component/view
- Run the react app
- Notice that the `check` isn't rendering correctly which seems a encoding problem
### Actual behavior:
- Import `check` icon
- Add to a React component/view
- Run the react app
- Check is displayed with correct encoding (e.g UTF-8)
## Any message or error
No console output
...
## Resources
No resources
...
```

14
.github/ISSUE_TEMPLATE/icon_request.md vendored Normal file
View File

@ -0,0 +1,14 @@
---
name: Icon request
about: Suggest an new icon for this project
---
<!--
Before creating an icon request, please search to see if someone has requested the icon already. If there is an open request, please add a 👍.
-->
## Icon Request
* Icon name:
* Use case:
* Screenshots of similar icons:

1
.gitignore vendored
View File

@ -3,3 +3,4 @@ node_modules
dist
sandbox
stash
coverage

View File

@ -8,7 +8,10 @@ node_js: 8
before_script:
- npm prune
script:
- npm start
- npm run all
after_success:
- npx codecov
- npx babel-node ./bin/sync-algolia.js
deploy:
provider: script
skip_cleanup: true

View File

@ -37,24 +37,36 @@ When creating a new issue make sure to include the following:
- A screenshot of any visual bug.
Here is what a great bug report would look like:
```
Check not rendering properly
## Prerequisites
Version: Release v3.1.0
Downloaded from: Import using webpack
OS: Mac OSX
Running from: Import using webpack
Operating system: Mac OSX
Bits: 64 bits
## Step to reproduce
How to reproduce:
- Import `check` icon
- Add to a React component/view
- Run the react app
- Notice that the `check` isn't rendering correctly which seems a encoding problem
Actual result:
### Actual behavior:
- Import `check` icon
- Add to a React component/view
- Run the react app
- Check is displayed with correct encoding (e.g UTF-8)
## Any message or error
No console output
...
## Resources
No resources
...
```

110
README.md
View File

@ -1,9 +1,11 @@
# Feather
[![Travis branch](https://img.shields.io/travis/feathericons/feather/master.svg?style=flat-square)](https://travis-ci.org/feathericons/feather)
[![npm downloads](https://img.shields.io/npm/dm/feather-icons.svg?style=flat-square)](https://npm-stat.com/charts.html?package=feather-icons&from=2017-06-01)
[![Build status](https://img.shields.io/travis/feathericons/feather/master.svg?style=flat-square)](https://travis-ci.org/feathericons/feather)
[![Coverage](https://img.shields.io/codecov/c/github/feathericons/feather/master.svg?style=flat-square)](https://codecov.io/gh/feathericons/feather)
[![npm downloads](https://img.shields.io/npm/dm/feather-icons.svg?style=flat-square)](https://www.npmjs.com/package/feather-icons)
[![npm version](https://img.shields.io/npm/v/feather-icons.svg?style=flat-square)](https://www.npmjs.com/package/feather-icons)
[![CDNJS version](https://img.shields.io/cdnjs/v/feather-icons.svg?style=flat-square)](https://cdnjs.com/libraries/feather-icons)
[![Donate](https://img.shields.io/badge/donate-paypal-blue.svg?style=flat-square)](https://www.paypal.com/cgi-bin/webscr?cmd=_donations&amp;business=G6CPFZ6PQRZW8&amp;lc=US&amp;item_name=Feather&amp;currency_code=USD&amp;bn=PP%2dDonationsBF%3abtn_donateCC_LG%2egif%3aNonHosted)
## What is Feather?
@ -11,7 +13,7 @@ Feather is a collection of simply beautiful open source icons. Each icon is desi
https://feathericons.com
```sh
```shell
npm install feather-icons
```
@ -25,8 +27,9 @@ npm install feather-icons
* [Quick Start](#quick-start)
* [Usage](#usage)
* [Client-side](#client-side)
* [Client-side JavaScript](#client-side-javascript)
* [Node](#node)
* [SVG Sprite](#svg-sprite)
* [API Reference](#api-reference)
* [`feather.icons`](#feathericons)
* [`feather.icons[name].toSvg()`](#feathericonsnametosvgattrs)
@ -47,7 +50,7 @@ Or copy and paste the following code snippet into a blank `html` file.
<!DOCTYPE html>
<html lang="en">
<title></title>
<script src="https://unpkg.com/feather-icons/dist/feather.min.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
<body>
<!-- example icon -->
@ -66,7 +69,7 @@ At its core, Feather is a collection of [SVG](https://svgontheweb.com/#svg) file
The following are additional ways you can use Feather.
### Client-side
### Client-side JavaScript
#### 1. Install
@ -74,7 +77,7 @@ The following are additional ways you can use Feather.
Install with [npm](https://docs.npmjs.com/getting-started/what-is-npm).
```
```shell
npm install feather-icons --save
```
@ -82,25 +85,27 @@ Or just copy [`feather.js`](https://unpkg.com/feather-icons/dist/feather.js) or
#### 2. Include
Include `feather.js` or `feather.min.js` with a `<script>` tag. These files are located in the `dist` directory of the npm package.
Include `feather.js` or `feather.min.js` with a `<script>` tag:
```html
<script src="path/to/dist/feather.js"></script>
```
Or load the script from a CDN provider.
> **Note:** `feather.js` and `feather.min.js` are located in the `dist` directory of the npm package.
Or load the script from a CDN provider:
```html
<!-- choose one -->
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://unpkg.com/feather-icons/dist/feather.min.js"></script>
```
After including the script, `feather` will be available as a global variable.
#### 3. Use
To use an icon on your page, add a `data-feather` attribute with the icon name to an element.
To use an icon on your page, add a `data-feather` attribute with the icon name to an element:
```html
<i data-feather="circle"></i>
@ -110,7 +115,7 @@ See the complete list of icons at [feathericons.com](https://feathericons.com).
#### 4. Replace
Call the `feather.replace()` method.
Call the `feather.replace()` method:
```html
<script>
@ -123,15 +128,15 @@ All elements that have a `data-feather` attribute will be replaced with SVG mark
### Node
#### 1. Install
Install with [npm](https://docs.npmjs.com/getting-started/what-is-npm).
Install with [npm](https://docs.npmjs.com/getting-started/what-is-npm):
```
```shell
npm install feather-icons --save
```
#### 2. Require
```javascript
```js
const feather = require('feather-icons')
```
@ -154,7 +159,8 @@ feather.icons.x
// 'stroke-width': 2,
// 'stroke-linecap': 'round',
// 'stroke-linejoin': 'round',
// }
// },
// toSvg: [Function],
// }
feather.icons.x.toSvg()
@ -166,6 +172,60 @@ feather.icons.x.toSvg({ class: 'foo bar', 'stroke-width': 1, color: 'red' })
See the [API Reference](#api-reference) for more information about the available properties and methods of the `feather` object.
### SVG Sprite
#### 1. Install
> **Note:** If you intend to use Feather with a CDN, you can skip this installation step.
Install with [npm](https://docs.npmjs.com/getting-started/what-is-npm).
```shell
npm install feather-icons --save
```
Or just copy [`feather-sprite.svg`](https://unpkg.com/feather-icons/dist/feather-sprite.svg) into your project directory.
#### 2. Use
Include an icon on your page with the following markup:
```html
<svg
width="24"
height="24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<use xlink:href="path/to/feather-sprite.svg#circle"/>
</svg>
```
> **Note:** `circle` in the above example can be replaced with any valid icon name. See the complete list of icon names at [feathericons.com](https://feathericons.com).
However, this markup can be simplified using a simple CSS class to avoid repetition of SVG attributes between icons:
```css
.feather {
width: 24px;
height: 24px;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
}
```
```html
<svg class="feather">
<use xlink:href="path/to/dist/feather-sprite.svg#circle"/>
</svg>
```
## API Reference
### `feather.icons`
@ -191,13 +251,16 @@ feather.icons.x
// 'stroke-width': 2,
// 'stroke-linecap': 'round',
// 'stroke-linejoin': 'round',
// }
// },
// toSvg: [Function],
// }
feather.icons.x.toString()
// '<line ... /><line ... />'
```
> **Note:** `x` in the above example can be replaced with any valid icon name. See the complete list of icon names at [feathericons.com](https://feathericons.com). Icons with multi-word names (e.g. `arrow-right`) **cannot** be accessed using dot notation (e.g. `feather.icons.x`). Instead, use bracket notation (e.g. `feather.icons['arrow-right']`).
[View Source](https://github.com/colebemis/feather/blob/master/src/icons.js)
---
@ -212,9 +275,17 @@ Returns an SVG string.
| --------- | ------ | ----------- |
| `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. |
> **Hint:** You might find these SVG attributes helpful for manipulating icons:
> * [`color`](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/color)
> * [`width`](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/width)
> * [`height`](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/height)
> * [`stroke-width`](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-width)
> * [`stroke-linecap`](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linecap)
> * [`stroke-linejoin`](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linejoin)
#### Usage
```javascript
```js
feather.icons.circle.toSvg()
// '<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>'
@ -302,7 +373,7 @@ Returns an SVG string.
#### Usage
```javascript
```js
feather.toSvg('circle')
// '<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>'
@ -318,7 +389,6 @@ feather.toSvg('circle', { class: 'foo bar' })
## Roadmap
- [ ] Write icon design guidelines
- [ ] Track code coverage
- [ ] Improve SVG accessibility
- [ ] Handle usage of custom icons
- [ ] Add usage examples

6
bin/.eslintrc.json Normal file
View File

@ -0,0 +1,6 @@
{
"rules": {
"import/no-extraneous-dependencies": "off",
"no-console": "off"
}
}

View File

@ -0,0 +1,3 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`builds sprite correctly 1`] = `"<svg xmlns=\\"http://www.w3.org/2000/svg\\"><defs><symbol id=\\"icon1\\" viewBox=\\"0 0 24 24\\"><line x1=\\"23\\" y1=\\"1\\" x2=\\"1\\" y2=\\"23\\"></line><line x1=\\"1\\" y1=\\"1\\" x2=\\"23\\" y2=\\"23\\"></line></symbol><symbol id=\\"icon2\\" viewBox=\\"0 0 24 24\\"><circle cx=\\"12\\" cy=\\"12\\" r=\\"11\\"></circle></symbol></defs></svg>"`;

View File

@ -0,0 +1,12 @@
/* eslint-env jest */
import buildSpriteString from '../build-sprite-string';
const icons = {
icon1:
'<line x1="23" y1="1" x2="1" y2="23"></line><line x1="1" y1="1" x2="23" y2="23"></line>',
icon2: '<circle cx="12" cy="12" r="11"></circle>',
};
test('builds sprite correctly', () => {
expect(buildSpriteString(icons)).toMatchSnapshot();
});

View File

@ -6,7 +6,7 @@ import buildIconsObject from './build-icons-object';
const IN_DIR = path.resolve(__dirname, '../icons');
const OUT_FILE = path.resolve(__dirname, '../dist/icons.json');
console.log(`Building ${OUT_FILE}`); // eslint-disable-line no-console
console.log(`Building ${OUT_FILE}...`);
const svgFiles = fs
.readdirSync(IN_DIR)

View File

@ -1,12 +1,11 @@
/* eslint-disable import/no-extraneous-dependencies */
import path from 'path';
import cheerio from 'cheerio';
import { minify } from 'html-minifier';
/**
* Build an object in the format: `{ <name>: <contents> }`.
* @param {string[]} svgFiles - A list of file names.
* @param {Function} getSvg - A function that returns the contents of an SVG file.
* @param {string[]} svgFiles - A list of filenames.
* @param {Function} getSvg - A function that returns the contents of an SVG file given a filename.
* @returns {Object}
*/
function buildIconsObject(svgFiles, getSvg) {
@ -26,6 +25,7 @@ function buildIconsObject(svgFiles, getSvg) {
/**
* Get contents between opening and closing `<svg>` tags.
* @param {string} svg
* @returns {string}
*/
function getSvgContents(svg) {
const $ = cheerio.load(svg);

View File

@ -0,0 +1,28 @@
import DEFAULT_ATTRS from '../src/default-attrs.json';
/**
* Build an SVG sprite string containing SVG symbols.
* @param {Object} icons
* @returns {string}
*/
function buildSpriteString(icons) {
const symbols = Object.keys(icons)
.map(icon => toSvgSymbol(icon, icons[icon]))
.join('');
return `<svg xmlns="${DEFAULT_ATTRS.xmlns}"><defs>${symbols}</defs></svg>`;
}
/**
* Create an SVG symbol string.
* @param {string} name - Icon name
* @param {string} contents - SVG contents
* @returns {string}
*/
function toSvgSymbol(name, contents) {
return `<symbol id="${name}" viewBox="${DEFAULT_ATTRS.viewBox}">${
contents
}</symbol>`;
}
export default buildSpriteString;

10
bin/build-sprite.js Normal file
View File

@ -0,0 +1,10 @@
import fs from 'fs';
import path from 'path';
import icons from '../dist/icons.json';
import buildSpriteString from './build-sprite-string';
const OUT_FILE = path.resolve(__dirname, '../dist/feather-sprite.svg');
console.log(`Building ${OUT_FILE}...`);
fs.writeFileSync(OUT_FILE, buildSpriteString(icons));

View File

@ -4,7 +4,7 @@ import icons from '../src/icons';
const OUT_DIR = path.resolve(__dirname, '../dist/icons');
console.log(`Building SVGs in ${OUT_DIR}`); // eslint-disable-line no-console
console.log(`Building SVGs in ${OUT_DIR}...`);
Object.keys(icons).forEach(name => {
const svg = icons[name].toSvg();

View File

@ -1,14 +1,25 @@
#!/bin/bash
./node_modules/.bin/babel-node bin/process-svgs.js
# Process SVG files
npx babel-node bin/process-svgs.js
./node_modules/.bin/rimraf dist
# Create dist directory
npx rimraf dist
mkdir dist
./node_modules/.bin/babel-node bin/build-icons-json.js
./node_modules/.bin/rimraf dist/icons
# Build icons.json
npx babel-node bin/build-icons-json.js
# Build SVG sprite
npx babel-node bin/build-sprite.js
# Create dist/icons directory
npx rimraf dist/icons
mkdir dist/icons
./node_modules/.bin/babel-node bin/build-svgs.js
./node_modules/.bin/webpack --output-filename feather.js
./node_modules/.bin/webpack --output-filename feather.min.js -p
# Build SVG icons
npx babel-node bin/build-svgs.js
# Build JavaScript library
npx webpack --output-filename feather.js --mode development
npx webpack --output-filename feather.min.js --mode production

View File

@ -1,4 +1,3 @@
/* eslint-disable import/no-extraneous-dependencies */
import Svgo from 'svgo';
import cheerio from 'cheerio';
import { format } from 'prettier';

View File

@ -5,7 +5,7 @@ import processSvg from './process-svg';
const IN_DIR = path.resolve(__dirname, '../icons');
console.log(`Processing SVGs in ${IN_DIR}`); // eslint-disable-line no-console
console.log(`Processing SVGs in ${IN_DIR}...`);
fs
.readdirSync(IN_DIR)

73
bin/sync-algolia.js Normal file
View File

@ -0,0 +1,73 @@
import algolia from 'algoliasearch';
import icons from '../dist/icons.json';
import tags from '../src/tags.json';
const ALGOLIA_APP_ID = '5EEOG744D0';
if (
process.env.TRAVIS_PULL_REQUEST === 'false' &&
process.env.TRAVIS_BRANCH === 'master'
) {
syncAlgolia();
} else {
console.log('Skipped Algolia sync.');
}
function syncAlgolia() {
// ALGOLIA_ADMIN_KEY must be added as an environment variable in Travis CI
const client = algolia(ALGOLIA_APP_ID, process.env.ALGOLIA_ADMIN_KEY);
console.log('Initializing target and temporary indexes...');
const index = client.initIndex('icons');
const indexTmp = client.initIndex('icons_tmp');
console.log(
"Copying target index's settings, synonyms and rules into temporary index...",
);
scopedCopyIndex(client, index.indexName, indexTmp.indexName)
.then(() => {
const objects = Object.keys(icons).map(name => ({
name,
tags: tags[name] || [],
}));
console.log('Adding objects to the temporary index...');
return addObjects(indexTmp, objects);
})
.then(() => {
console.log('Moving temporary index to target index...');
return moveIndex(client, indexTmp.indexName, index.indexName);
});
}
function scopedCopyIndex(
client,
indexNameSrc,
indexNameDest,
scope = ['settings', 'synonyms', 'rules'],
) {
return new Promise((resolve, reject) => {
client.copyIndex(indexNameSrc, indexNameDest, scope, (error, contents) => {
if (error) reject(error);
resolve(contents);
});
});
}
function addObjects(index, objects) {
return new Promise((resolve, reject) => {
index.addObjects(objects, (error, contents) => {
if (error) reject(error);
resolve(contents);
});
});
}
function moveIndex(client, indexNameSrc, indexNameDest) {
return new Promise((resolve, reject) => {
client.moveIndex(indexNameSrc, indexNameDest, (error, contents) => {
if (error) reject(error);
resolve(contents);
});
});
}

View File

@ -1,6 +1,8 @@
module.exports = {
extends: ['@commitlint/config-angular'],
extends: ['@commitlint/config-conventional'],
rules: {
'subject-case': 'sentence-case',
'scope-case': [0],
'subject-case': [2, 'always', 'sentence-case'],
'header-max-length': [0],
},
};

15
icons/archive.svg Normal file
View File

@ -0,0 +1,15 @@
<svg
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"
>
<polyline points="21 8 21 21 3 21 3 8" />
<rect x="1" y="3" width="22" height="5" />
<line x1="10" y1="12" x2="14" y2="12" />
</svg>

After

Width:  |  Height:  |  Size: 340 B

17
icons/coffee.svg Normal file
View File

@ -0,0 +1,17 @@
<svg
viewBox="0 0 24 24"
width="24"
height="24"
xmlns="http://www.w3.org/2000/svg"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M18 8h1a4 4 0 0 1 0 8h-1" />
<path d="M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z" />
<line x1="6" y1="1" x2="6" y2="4" />
<line x1="10" y1="1" x2="10" y2="4" />
<line x1="14" y1="1" x2="14" y2="4" />
</svg>

After

Width:  |  Height:  |  Size: 427 B

17
icons/gift.svg Normal file
View File

@ -0,0 +1,17 @@
<svg
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"
>
<polyline points="20 12 20 22 4 22 4 12" />
<rect x="2" y="7" width="20" height="5" />
<line x1="12" y1="22" x2="12" y2="7" />
<path d="M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z" />
<path d="M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z" />
</svg>

After

Width:  |  Height:  |  Size: 459 B

14
icons/youtube.svg Normal file
View File

@ -0,0 +1,14 @@
<svg
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"
>
<path d="M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.25 29 29 0 0 0-.46-5.33z" />
<polygon points="9.75 15.02 15.5 11.75 9.75 8.48 9.75 15.02" />
</svg>

After

Width:  |  Height:  |  Size: 547 B

12577
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -3,14 +3,16 @@
"version": "0.0.0-development",
"description": "Simply beautiful open source icons",
"main": "dist/feather.js",
"unpkg": "dist/feather.min.js",
"files": [
"dist"
],
"scripts": {
"start": "npm-run-all --sequential build lint test",
"all": "npm-run-all --sequential build lint test:coverage",
"build": "./bin/build.sh",
"lint": "eslint .",
"test": "jest",
"test": "jest --watch",
"test:coverage": "jest --coverage",
"cm": "git-cz",
"precommit": "lint-staged",
"commitmsg": "commitlint --edit"
@ -20,36 +22,41 @@
"path": "cz-conventional-changelog"
}
},
"jest": {
"collectCoverageFrom": [
"src/**/*.js"
]
},
"dependencies": {
"classnames": "^2.2.5"
"classnames": "^2.2.5",
"core-js": "^2.5.3"
},
"devDependencies": {
"@commitlint/cli": "^5.2.5",
"@commitlint/config-angular": "^5.1.1",
"@commitlint/config-conventional": "^6.1.3",
"algoliasearch": "^3.27.1",
"babel-cli": "^6.24.1",
"babel-loader": "^7.1.1",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-es2015": "^6.24.1",
"babel-register": "^6.24.1",
"babel-preset-env": "^1.7.0",
"babel-preset-stage-2": "^6.24.1",
"cheerio": "^1.0.0-rc.2",
"commitizen": "^2.9.6",
"core-js": "^2.5.3",
"cz-conventional-changelog": "^2.1.0",
"eslint": "^4.15.0",
"eslint": "^4.19.1",
"eslint-config-airbnb-base": "^12.1.0",
"eslint-config-prettier": "^2.9.0",
"eslint-plugin-import": "^2.5.0",
"eslint-plugin-prettier": "^2.5.0",
"html-minifier": "^3.5.8",
"husky": "^0.14.3",
"jest": "^21.2.1",
"jest": "^22.4.4",
"lint-staged": "^6.0.0",
"npm-run-all": "^4.1.2",
"prettier": "^1.8.2",
"rimraf": "^2.6.2",
"semantic-release": "^12.2.2",
"svgo": "^0.7.2",
"webpack": "^3.10.0"
"webpack": "^4.8.3",
"webpack-cli": "^2.1.3"
},
"repository": {
"type": "git",

View File

@ -0,0 +1,3 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`throws an error when run in node environment 1`] = `"\`feather.replace()\` only works in a browser environment."`;

View File

@ -1,5 +1,5 @@
/* eslint-env jest */
import feather from '../..';
import feather from '../index';
test('has correct properties', () => {
expect(feather).toHaveProperty('icons');

View File

@ -0,0 +1,10 @@
/**
* @jest-environment node
*/
/* eslint-env jest */
import replace from '../replace';
test('throws an error when run in node environment', () => {
expect(replace).toThrowErrorMatchingSnapshot();
});

View File

@ -22,6 +22,7 @@
"cloud-snow": ["weather", "blizzard"],
"cloud": ["weather"],
"codepen": ["logo"],
"coffee": ["drink", "cup", "mug", "tea", "cafe", "hot", "beverage"],
"command": ["keyboard", "cmd"],
"compass": ["navigation", "safari", "travel"],
"copy": ["clone", "duplicate"],
@ -53,6 +54,7 @@
"folder-minus": ["directory"],
"folder-plus": ["directory"],
"folder": ["directory"],
"gift": ["present", "box", "birthday", "party"],
"git-branch": ["code", "version control"],
"git-commit": ["code", "version control"],
"git-merge": ["code", "version control"],
@ -150,6 +152,7 @@
"x-circle": ["cancel", "close", "delete", "remove", "times"],
"x-square": ["cancel", "close", "delete", "remove", "times"],
"x": ["cancel", "close", "delete", "remove", "times"],
"youtube": ["logo", "video", "play"],
"zap-off": ["flash", "camera", "lightning"],
"zap": ["flash", "camera", "lightning"]
}

View File

@ -1,25 +0,0 @@
import path from 'path';
export default {
entry: [
'core-js/fn/array/from',
'core-js/fn/object/assign',
'core-js/fn/set',
path.resolve(__dirname, 'src/index.js'),
],
output: {
path: path.resolve(__dirname, 'dist'),
libraryTarget: 'umd',
library: 'feather',
},
devtool: 'source-map',
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
},
],
},
};

23
webpack.config.js Normal file
View File

@ -0,0 +1,23 @@
const path = require('path');
module.exports = {
entry: ['core-js/fn/array/from', path.resolve(__dirname, 'src/index.js')],
output: {
path: path.resolve(__dirname, 'dist'),
libraryTarget: 'umd',
library: 'feather',
// Prevents webpack from referencing `window` in the UMD build
// Source: https://git.io/vppgU
globalObject: "typeof self !== 'undefined' ? self : this",
},
devtool: 'source-map',
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
},
],
},
};