mirror of
https://github.com/feathericons/feather.git
synced 2023-08-10 21:13:24 +03:00
Compare commits
40 Commits
Author | SHA1 | Date | |
---|---|---|---|
93dd65f8c5 | |||
031f305c83 | |||
1180d2d8b4 | |||
3422f0aaf7 | |||
b3655c438f | |||
5a8a8b7d93 | |||
ba33c8312e | |||
b157434645 | |||
6adadf4319 | |||
7ea765f04f | |||
2dbe78fc02 | |||
0dce8a8fb9 | |||
ed0e08a451 | |||
b5331a253d | |||
ada2681ad4 | |||
c7d417e19b | |||
6999eeba10 | |||
9e681f8f89 | |||
1f5bb6e1dc | |||
fbdff6452c | |||
1f87e256b6 | |||
5596f66525 | |||
1d3807c005 | |||
a7fe66e4b4 | |||
c85cb6556b | |||
3ad661ecae | |||
4ae3fa8093 | |||
e3a3cd6727 | |||
73111225b0 | |||
d5e7e14e5b | |||
a29480d769 | |||
84b8428ee9 | |||
f6984951a9 | |||
e70ae51980 | |||
dd9a0b0fe1 | |||
44d6501a8a | |||
c847a2b195 | |||
9d3a802eb2 | |||
10a1b217ef | |||
ef4f52918b |
@ -9,5 +9,8 @@ before_script:
|
||||
- npm prune
|
||||
script:
|
||||
- npm start
|
||||
after_success:
|
||||
- npm run semantic-release
|
||||
deploy:
|
||||
provider: script
|
||||
skip_cleanup: true
|
||||
script:
|
||||
- npx semantic-release
|
||||
|
41
README.md
41
README.md
@ -27,11 +27,12 @@ npm install feather-icons
|
||||
* [Usage](#usage)
|
||||
* [Client-side](#client-side)
|
||||
* [Node](#node)
|
||||
* [SVG Sprite](#svg-sprite)
|
||||
* [API Reference](#api-reference)
|
||||
* [`feather.icons`](#feathericons)
|
||||
* [`feather.icons[name].toSvg()`](#feathericonsnametosvgattrs)
|
||||
* [`feather.replace()`](#featherreplaceattrs)
|
||||
* [[Deprecated] `feather.toSvg()`](#deprecated-feathertosvgname-attrs)
|
||||
* [(DEPRECATED) `feather.toSvg()`](#deprecated-feathertosvgname-attrs)
|
||||
* [Roadmap](#roadmap)
|
||||
* [Contributing](#contributing)
|
||||
* [Related Projects](#related-projects)
|
||||
@ -166,6 +167,42 @@ 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
|
||||
A SVG Sprite is also provided, which can be used as following:
|
||||
```html
|
||||
<svg class="feather feather-[iconName]"
|
||||
width="24"
|
||||
height="24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<use xlink:href="feather-sprite.svg#[iconName]"/>
|
||||
</svg>
|
||||
```
|
||||
Where `iconName` is the name of the icon you want to display.
|
||||
|
||||
Same result but using a CSS class:
|
||||
```css
|
||||
.feather {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
stroke: currentColor;
|
||||
stroke-width: 2;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
fill: none;
|
||||
}
|
||||
```
|
||||
```html
|
||||
<svg class="feather feather-[iconName]">
|
||||
<use xlink:href="feather-sprite.svg#[iconName]"/>
|
||||
</svg>
|
||||
```
|
||||
Prefer using CSS classes to keep things organized.
|
||||
|
||||
## API Reference
|
||||
|
||||
### `feather.icons`
|
||||
@ -287,7 +324,7 @@ All attributes on the placeholder element (i.e. `<i>`) will be copied to the `<s
|
||||
|
||||
---
|
||||
|
||||
### [Deprecated] `feather.toSvg(name, [attrs])`
|
||||
### (DEPRECATED) `feather.toSvg(name, [attrs])`
|
||||
|
||||
> **Note:** `feather.toSvg()` is deprecated. Please use `feather.icons[name].toSvg()` instead.
|
||||
|
||||
|
14
bin/__tests__/__snapshots__/build-sprite-string.test.js.snap
Normal file
14
bin/__tests__/__snapshots__/build-sprite-string.test.js.snap
Normal file
@ -0,0 +1,14 @@
|
||||
// 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>"
|
||||
`;
|
12
bin/__tests__/build-sprite-string.test.js
Normal file
12
bin/__tests__/build-sprite-string.test.js
Normal 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();
|
||||
});
|
30
bin/build-sprite-string.js
Normal file
30
bin/build-sprite-string.js
Normal file
@ -0,0 +1,30 @@
|
||||
import defaultAttrs from '../src/default-attrs.json';
|
||||
|
||||
const svgStartTag = `<svg xmlns="${defaultAttrs.xmlns}">\n<defs>\n`;
|
||||
const svgEndTag = '</defs>\n</svg>';
|
||||
|
||||
/**
|
||||
* Renders the inner sprites as SVG Symbols
|
||||
* @param {object} icons the icons object
|
||||
* @returns {string} the rendered string with SVG symbols
|
||||
*/
|
||||
function buildSpriteString(icons) {
|
||||
const symbols = Object.keys(icons)
|
||||
.map(icon => toSvgSymbol(icon, icons[icon]))
|
||||
.join('');
|
||||
|
||||
return svgStartTag + symbols + svgEndTag;
|
||||
}
|
||||
|
||||
/**
|
||||
* Renders a SVG symbol tag
|
||||
* @param {string} name The name of the icon
|
||||
* @param {string} contents The contents of the icon
|
||||
* @returns {string} the rendered SVG symbol
|
||||
*/
|
||||
function toSvgSymbol(name, contents) {
|
||||
return `<symbol id="${name}" viewBox="${defaultAttrs.viewBox}">
|
||||
${contents}\n</symbol>\n`;
|
||||
}
|
||||
|
||||
export default buildSpriteString;
|
14
bin/build-sprite.js
Normal file
14
bin/build-sprite.js
Normal file
@ -0,0 +1,14 @@
|
||||
import fs from 'fs';
|
||||
import path from 'path';
|
||||
import icons from '../dist/icons.json';
|
||||
import buildSpriteString from './build-sprite-string';
|
||||
|
||||
const sprite = buildSpriteString(icons);
|
||||
|
||||
const OUT_FILE = path.resolve(__dirname, '../dist/feather-sprite.svg');
|
||||
|
||||
console.log(`Building ${OUT_FILE}`); // eslint-disable-line no-console
|
||||
|
||||
fs.writeFile(OUT_FILE, sprite, err => {
|
||||
if (err) throw err;
|
||||
});
|
@ -5,6 +5,7 @@
|
||||
./node_modules/.bin/rimraf dist
|
||||
mkdir dist
|
||||
./node_modules/.bin/babel-node bin/build-icons-json.js
|
||||
./node_modules/.bin/babel-node bin/build-sprite.js
|
||||
|
||||
./node_modules/.bin/rimraf dist/icons
|
||||
mkdir dist/icons
|
||||
|
15
icons/archive.svg
Normal file
15
icons/archive.svg
Normal 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/gift.svg
Normal file
17
icons/gift.svg
Normal 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 |
@ -9,7 +9,7 @@
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
|
||||
<circle cx="12" cy="12" r="10" />
|
||||
<path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
|
||||
<line x1="12" y1="17" x2="12" y2="17" />
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 339 B After Width: | Height: | Size: 339 B |
14
icons/youtube.svg
Normal file
14
icons/youtube.svg
Normal 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 |
1792
package-lock.json
generated
1792
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
27
package.json
27
package.json
@ -13,8 +13,7 @@
|
||||
"test": "jest",
|
||||
"cm": "git-cz",
|
||||
"precommit": "lint-staged",
|
||||
"commitmsg": "commitlint --edit",
|
||||
"semantic-release": "semantic-release pre && npm publish && semantic-release post"
|
||||
"commitmsg": "commitlint --edit"
|
||||
},
|
||||
"config": {
|
||||
"commitizen": {
|
||||
@ -25,8 +24,8 @@
|
||||
"classnames": "^2.2.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@commitlint/cli": "^5.0.0",
|
||||
"@commitlint/config-angular": "^5.0.0",
|
||||
"@commitlint/cli": "^5.2.5",
|
||||
"@commitlint/config-angular": "^5.1.1",
|
||||
"babel-cli": "^6.24.1",
|
||||
"babel-loader": "^7.1.1",
|
||||
"babel-plugin-transform-object-rest-spread": "^6.26.0",
|
||||
@ -34,23 +33,23 @@
|
||||
"babel-register": "^6.24.1",
|
||||
"cheerio": "^1.0.0-rc.2",
|
||||
"commitizen": "^2.9.6",
|
||||
"core-js": "^2.4.1",
|
||||
"core-js": "^2.5.3",
|
||||
"cz-conventional-changelog": "^2.1.0",
|
||||
"eslint": "^4.0.0",
|
||||
"eslint-config-airbnb-base": "^11.2.0",
|
||||
"eslint-config-prettier": "^2.7.0",
|
||||
"eslint": "^4.15.0",
|
||||
"eslint-config-airbnb-base": "^12.1.0",
|
||||
"eslint-config-prettier": "^2.9.0",
|
||||
"eslint-plugin-import": "^2.5.0",
|
||||
"eslint-plugin-prettier": "^2.3.1",
|
||||
"html-minifier": "^3.5.6",
|
||||
"husky": "^0.13.4",
|
||||
"eslint-plugin-prettier": "^2.5.0",
|
||||
"html-minifier": "^3.5.8",
|
||||
"husky": "^0.14.3",
|
||||
"jest": "^21.2.1",
|
||||
"lint-staged": "^5.0.0",
|
||||
"lint-staged": "^6.0.0",
|
||||
"npm-run-all": "^4.1.2",
|
||||
"prettier": "^1.8.2",
|
||||
"rimraf": "^2.6.2",
|
||||
"semantic-release": "^8.2.0",
|
||||
"semantic-release": "^12.2.2",
|
||||
"svgo": "^0.7.2",
|
||||
"webpack": "^3.0.0"
|
||||
"webpack": "^3.10.0"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
|
@ -1,27 +1,28 @@
|
||||
{
|
||||
"activity": ["pulse", "health"],
|
||||
"airplay": ["stream", "cast"],
|
||||
"activity": ["pulse", "health", "action", "motion"],
|
||||
"airplay": ["stream", "cast", "mirroring"],
|
||||
"alert-circle": ["warning"],
|
||||
"alert-octagon": ["warning"],
|
||||
"alert-triangle": ["warning"],
|
||||
"at-sign": ["mention"],
|
||||
"award": ["achievement", "badge"],
|
||||
"aperture": ["camera", "photo"],
|
||||
"bell": ["alarm", "notification"],
|
||||
"bell-off": ["alarm", "notification"],
|
||||
"bell-off": ["alarm", "notification", "silent"],
|
||||
"bluetooth": ["wireless"],
|
||||
"book-open": ["read"],
|
||||
"book": ["read"],
|
||||
"bookmark": ["read"],
|
||||
"briefcase": ["work"],
|
||||
"book": ["read", "dictionary", "booklet", "magazine"],
|
||||
"bookmark": ["read", "clip", "marker", "tag"],
|
||||
"briefcase": ["work", "bag", "baggage", "folder"],
|
||||
"clipboard": ["copy"],
|
||||
"clock": ["time", "watch"],
|
||||
"cloud-drizzle": ["weather"],
|
||||
"cloud-lightning": ["weather"],
|
||||
"clock": ["time", "watch", "alarm"],
|
||||
"cloud-drizzle": ["weather", "shower"],
|
||||
"cloud-lightning": ["weather", "bolt"],
|
||||
"cloud-rain": ["weather"],
|
||||
"cloud-snow": ["weather"],
|
||||
"cloud-snow": ["weather", "blizzard"],
|
||||
"cloud": ["weather"],
|
||||
"codepen": ["logo"],
|
||||
"command": ["keyboard"],
|
||||
"command": ["keyboard", "cmd"],
|
||||
"compass": ["navigation", "safari", "travel"],
|
||||
"copy": ["clone", "duplicate"],
|
||||
"corner-down-left": ["arrow"],
|
||||
@ -32,15 +33,17 @@
|
||||
"corner-right-up": ["arrow"],
|
||||
"corner-up-left": ["arrow"],
|
||||
"corner-up-right": ["arrow"],
|
||||
"credit-card": ["purchase", "payment"],
|
||||
"crop": ["photo"],
|
||||
"credit-card": ["purchase", "payment", "cc"],
|
||||
"crop": ["photo", "image"],
|
||||
"crosshair": ["aim", "target"],
|
||||
"database": ["storage"],
|
||||
"delete": ["remove"],
|
||||
"disc": ["album", "cd", "dvd", "music"],
|
||||
"dollar-sign": ["currency", "money", "payment"],
|
||||
"droplet": ["water"],
|
||||
"edit": ["pencil"],
|
||||
"edit-2": ["pencil"],
|
||||
"edit-3": ["pencil"],
|
||||
"edit": ["pencil", "change"],
|
||||
"edit-2": ["pencil", "change"],
|
||||
"edit-3": ["pencil", "change"],
|
||||
"eye": ["view", "watch"],
|
||||
"eye-off": ["view", "watch"],
|
||||
"external-link": ["outbound"],
|
||||
@ -50,6 +53,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"],
|
||||
@ -59,26 +63,26 @@
|
||||
"global": ["world", "browser", "language", "translate"],
|
||||
"hard-drive": ["computer", "server"],
|
||||
"hash": ["hashtag", "number", "pound"],
|
||||
"headphones": ["music"],
|
||||
"headphones": ["music", "audio"],
|
||||
"heart": ["like", "love"],
|
||||
"help-circle": ["question mark"],
|
||||
"home": ["house"],
|
||||
"image": ["picture"],
|
||||
"inbox": ["email"],
|
||||
"instagram": ["logo", "camera"],
|
||||
"life-bouy": ["help", "life ring"],
|
||||
"life-bouy": ["help", "life ring", "support"],
|
||||
"linkedin": ["logo"],
|
||||
"lock": ["security", "password"],
|
||||
"log-in": ["sign in", "arrow"],
|
||||
"log-out": ["sign out", "arrow"],
|
||||
"mail": ["email"],
|
||||
"map-pin": ["location", "navigation", "travel"],
|
||||
"map-pin": ["location", "navigation", "travel", "marker"],
|
||||
"map": ["location", "navigation", "travel"],
|
||||
"maximize": ["fullscreen"],
|
||||
"maximize-2": ["fullscreen", "arrows"],
|
||||
"menu": ["bars", "navigation", "hamburger"],
|
||||
"message-circle": ["comment"],
|
||||
"message-square": ["comment"],
|
||||
"message-circle": ["comment", "chat"],
|
||||
"message-square": ["comment", "chat"],
|
||||
"mic-off": ["record"],
|
||||
"mic": ["record"],
|
||||
"minimize": ["exit fullscreen"],
|
||||
@ -104,7 +108,7 @@
|
||||
"power": ["on", "off"],
|
||||
"radio": ["signal"],
|
||||
"rewind": ["music"],
|
||||
"rss": ["feed"],
|
||||
"rss": ["feed", "subscribe"],
|
||||
"save": ["floppy disk"],
|
||||
"send": ["message", "mail", "paper airplane"],
|
||||
"settings": ["cog", "edit", "gear", "preferences"],
|
||||
@ -125,8 +129,8 @@
|
||||
"tag": ["label"],
|
||||
"target": ["bullseye"],
|
||||
"terminal": ["code", "command line"],
|
||||
"thumbs-down": ["dislike"],
|
||||
"thumbs-up": ["like"],
|
||||
"thumbs-down": ["dislike", "bad"],
|
||||
"thumbs-up": ["like", "good"],
|
||||
"toggle-left": ["on", "off", "switch"],
|
||||
"toggle-right": ["on", "off", "switch"],
|
||||
"trash": ["garbage", "delete", "remove"],
|
||||
@ -143,10 +147,11 @@
|
||||
"volume-2": ["music", "sound"],
|
||||
"volume-x": ["music", "sound", "mute"],
|
||||
"watch": ["clock", "time"],
|
||||
"wind": ["weather"],
|
||||
"wind": ["weather", "air"],
|
||||
"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"]
|
||||
}
|
||||
|
Reference in New Issue
Block a user