mirror of
https://github.com/feathericons/feather.git
synced 2023-08-10 21:13:24 +03:00
Compare commits
12 Commits
Author | SHA1 | Date | |
---|---|---|---|
3422f0aaf7 | |||
b3655c438f | |||
5a8a8b7d93 | |||
ba33c8312e | |||
b157434645 | |||
6adadf4319 | |||
7ea765f04f | |||
2dbe78fc02 | |||
0dce8a8fb9 | |||
ed0e08a451 | |||
b5331a253d | |||
ada2681ad4 |
@ -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
|
||||
|
@ -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 |
1558
package-lock.json
generated
1558
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
11
package.json
11
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": {
|
||||
@ -36,19 +35,19 @@
|
||||
"commitizen": "^2.9.6",
|
||||
"core-js": "^2.5.3",
|
||||
"cz-conventional-changelog": "^2.1.0",
|
||||
"eslint": "^4.13.1",
|
||||
"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.4.0",
|
||||
"html-minifier": "^3.5.7",
|
||||
"eslint-plugin-prettier": "^2.5.0",
|
||||
"html-minifier": "^3.5.8",
|
||||
"husky": "^0.14.3",
|
||||
"jest": "^21.2.1",
|
||||
"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.10.0"
|
||||
},
|
||||
|
Reference in New Issue
Block a user