feat: Add react package (#4)

* chore: Organise

* feat: Add `react` package

* refactor: Remove unneeded char
This commit is contained in:
John Letey
2020-06-13 12:52:10 +01:00
committed by GitHub
parent 6a3378ce5a
commit d652e795d6
338 changed files with 10986 additions and 15748 deletions

View File

@@ -0,0 +1,54 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`constructs icon object correctly 1`] = `
Icon {
"attrs": Object {
"class": "feather feather-test",
"fill": "none",
"height": 24,
"stroke": "currentColor",
"stroke-linecap": "round",
"stroke-linejoin": "round",
"stroke-width": 2,
"viewBox": "0 0 24 24",
"width": 24,
"xmlns": "http://www.w3.org/2000/svg",
},
"contents": "<line x1=\\"23\\" y1=\\"1\\" x2=\\"1\\" y2=\\"23\\" /><line x1=\\"1\\" y1=\\"1\\" x2=\\"23\\" y2=\\"23\\" />",
"name": "test",
"tags": Array [
"hello",
"world",
"foo",
"bar",
],
}
`;
exports[`constructs icon object correctly 2`] = `
Icon {
"attrs": Object {
"class": "feather feather-test",
"fill": "none",
"height": 24,
"stroke": "currentColor",
"stroke-linecap": "round",
"stroke-linejoin": "round",
"stroke-width": 2,
"viewBox": "0 0 24 24",
"width": 24,
"xmlns": "http://www.w3.org/2000/svg",
},
"contents": "<line x1=\\"23\\" y1=\\"1\\" x2=\\"1\\" y2=\\"23\\" /><line x1=\\"1\\" y1=\\"1\\" x2=\\"23\\" y2=\\"23\\" />",
"name": "test",
"tags": Array [],
}
`;
exports[`toString() returns correct string 1`] = `"<line x1=\\"23\\" y1=\\"1\\" x2=\\"1\\" y2=\\"23\\" /><line x1=\\"1\\" y1=\\"1\\" x2=\\"23\\" y2=\\"23\\" />"`;
exports[`toSvg() returns correct string 1`] = `"<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\\" class=\\"feather feather-test\\"><line x1=\\"23\\" y1=\\"1\\" x2=\\"1\\" y2=\\"23\\" /><line x1=\\"1\\" y1=\\"1\\" x2=\\"23\\" y2=\\"23\\" /></svg>"`;
exports[`toSvg() returns correct string 2`] = `"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"1\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" class=\\"feather feather-test\\" color=\\"red\\"><line x1=\\"23\\" y1=\\"1\\" x2=\\"1\\" y2=\\"23\\" /><line x1=\\"1\\" y1=\\"1\\" x2=\\"23\\" y2=\\"23\\" /></svg>"`;
exports[`toSvg() returns correct string 3`] = `"<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\\" class=\\"feather feather-test foo bar\\" color=\\"red\\"><line x1=\\"23\\" y1=\\"1\\" x2=\\"1\\" y2=\\"23\\" /><line x1=\\"1\\" y1=\\"1\\" x2=\\"23\\" y2=\\"23\\" /></svg>"`;

View File

@@ -0,0 +1,45 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`exports correct object 1`] = `
Object {
"icon1": Icon {
"attrs": Object {
"class": "feather feather-icon1",
"fill": "none",
"height": 24,
"stroke": "currentColor",
"stroke-linecap": "round",
"stroke-linejoin": "round",
"stroke-width": 2,
"viewBox": "0 0 24 24",
"width": 24,
"xmlns": "http://www.w3.org/2000/svg",
},
"contents": "<line x1=\\"23\\" y1=\\"1\\" x2=\\"1\\" y2=\\"23\\" /><line x1=\\"1\\" y1=\\"1\\" x2=\\"23\\" y2=\\"23\\" />",
"name": "icon1",
"tags": Array [
"foo",
"bar",
"hello",
"world",
],
},
"icon2": Icon {
"attrs": Object {
"class": "feather feather-icon2",
"fill": "none",
"height": 24,
"stroke": "currentColor",
"stroke-linecap": "round",
"stroke-linejoin": "round",
"stroke-width": 2,
"viewBox": "0 0 24 24",
"width": 24,
"xmlns": "http://www.w3.org/2000/svg",
},
"contents": "<circle cx=\\"12\\" cy=\\"12\\" r=\\"11\\" />",
"name": "icon2",
"tags": Array [],
},
}
`;

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

@@ -0,0 +1,13 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`copies placeholder element attributes to <svg> tag 1`] = `"<i data-feather=\\"icon1\\" id=\\"test\\" class=\\"foo bar\\" stroke-width=\\"1\\"></i>"`;
exports[`copies placeholder element attributes to <svg> tag 2`] = `"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"1\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" class=\\"feather feather-icon1 foo bar\\" id=\\"test\\"><line x1=\\"23\\" y1=\\"1\\" x2=\\"1\\" y2=\\"23\\"></line><line x1=\\"1\\" y1=\\"1\\" x2=\\"23\\" y2=\\"23\\"></line></svg>"`;
exports[`replaces [data-feather] elements with SVG markup 1`] = `"<i data-feather=\\"icon1\\"></i><span data-feather=\\"icon2\\"></span>"`;
exports[`replaces [data-feather] elements with SVG markup 2`] = `"<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\\" class=\\"feather feather-icon1\\"><line x1=\\"23\\" y1=\\"1\\" x2=\\"1\\" y2=\\"23\\"></line><line x1=\\"1\\" y1=\\"1\\" x2=\\"23\\" y2=\\"23\\"></line></svg><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\\" class=\\"feather feather-icon2\\"><circle cx=\\"12\\" cy=\\"12\\" r=\\"11\\"></circle></svg>"`;
exports[`sets attributes passed as parameters 1`] = `"<i data-feather=\\"icon1\\" id=\\"test\\" class=\\"foo bar\\" stroke-width=\\"1\\"></i>"`;
exports[`sets attributes passed as parameters 2`] = `"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"1\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" class=\\"feather feather-icon1 foo bar hello\\" color=\\"salmon\\" id=\\"test\\"><line x1=\\"23\\" y1=\\"1\\" x2=\\"1\\" y2=\\"23\\"></line><line x1=\\"1\\" y1=\\"1\\" x2=\\"23\\" y2=\\"23\\"></line></svg>"`;

View File

@@ -0,0 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`returns correct string 1`] = `"<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\\" class=\\"feather feather-icon1\\"><line x1=\\"23\\" y1=\\"1\\" x2=\\"1\\" y2=\\"23\\" /><line x1=\\"1\\" y1=\\"1\\" x2=\\"23\\" y2=\\"23\\" /></svg>"`;
exports[`returns correct string 2`] = `"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"1\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" class=\\"feather feather-icon1\\" color=\\"red\\"><line x1=\\"23\\" y1=\\"1\\" x2=\\"1\\" y2=\\"23\\" /><line x1=\\"1\\" y1=\\"1\\" x2=\\"23\\" y2=\\"23\\" /></svg>"`;
exports[`returns correct string 3`] = `"<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\\" class=\\"feather feather-icon1 foo bar\\" color=\\"red\\"><line x1=\\"23\\" y1=\\"1\\" x2=\\"1\\" y2=\\"23\\" /><line x1=\\"1\\" y1=\\"1\\" x2=\\"23\\" y2=\\"23\\" /></svg>"`;

View File

@@ -0,0 +1,28 @@
/* eslint-env jest */
import Icon from '../icon';
const icon1 = new Icon(
'test',
'<line x1="23" y1="1" x2="1" y2="23" /><line x1="1" y1="1" x2="23" y2="23" />',
['hello', 'world', 'foo', 'bar'],
);
const icon2 = new Icon(
'test',
'<line x1="23" y1="1" x2="1" y2="23" /><line x1="1" y1="1" x2="23" y2="23" />',
);
test('constructs icon object correctly', () => {
expect(icon1).toMatchSnapshot();
expect(icon2).toMatchSnapshot();
});
test('toSvg() returns correct string', () => {
expect(icon1.toSvg()).toMatchSnapshot();
expect(icon1.toSvg({ 'stroke-width': 1, color: 'red' })).toMatchSnapshot();
expect(icon1.toSvg({ class: 'foo bar', color: 'red' })).toMatchSnapshot();
});
test('toString() returns correct string', () => {
expect(icon1.toString()).toMatchSnapshot();
});

View File

@@ -0,0 +1,16 @@
/* eslint-env jest */
import icons from '../icons';
jest.mock('../../dist/icons.json', () => ({
icon1:
'<line x1="23" y1="1" x2="1" y2="23" /><line x1="1" y1="1" x2="23" y2="23" />',
icon2: '<circle cx="12" cy="12" r="11" />',
}));
jest.mock('../tags.json', () => ({
icon1: ['foo', 'bar', 'hello', 'world'],
}));
test('exports correct object', () => {
expect(icons).toMatchSnapshot();
});

View File

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

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

@@ -0,0 +1,32 @@
/* eslint-env jest, browser */
import replace from '../replace';
jest.mock('../../dist/icons.json', () => ({
icon1:
'<line x1="23" y1="1" x2="1" y2="23" /><line x1="1" y1="1" x2="23" y2="23" />',
icon2: '<circle cx="12" cy="12" r="11" />',
}));
test('replaces [data-feather] elements with SVG markup', () => {
document.body.innerHTML =
'<i data-feather="icon1"></i><span data-feather="icon2"></i>';
expect(document.body.innerHTML).toMatchSnapshot();
replace();
expect(document.body.innerHTML).toMatchSnapshot();
});
test('copies placeholder element attributes to <svg> tag', () => {
document.body.innerHTML =
'<i data-feather="icon1" id="test" class="foo bar" stroke-width="1"></i>';
expect(document.body.innerHTML).toMatchSnapshot();
replace();
expect(document.body.innerHTML).toMatchSnapshot();
});
test('sets attributes passed as parameters', () => {
document.body.innerHTML =
'<i data-feather="icon1" id="test" class="foo bar" stroke-width="1"></i>';
expect(document.body.innerHTML).toMatchSnapshot();
replace({ class: 'foo bar hello', 'stroke-width': 1.5, color: 'salmon' });
expect(document.body.innerHTML).toMatchSnapshot();
});

View File

@@ -0,0 +1,21 @@
/* eslint-env jest */
import toSvg from '../to-svg';
jest.mock('../../dist/icons.json', () => ({
icon1:
'<line x1="23" y1="1" x2="1" y2="23" /><line x1="1" y1="1" x2="23" y2="23" />',
}));
test('returns correct string', () => {
expect(toSvg('icon1')).toMatchSnapshot();
expect(toSvg('icon1', { 'stroke-width': 1, color: 'red' })).toMatchSnapshot();
expect(toSvg('icon1', { class: 'foo bar', color: 'red' })).toMatchSnapshot();
});
test('throws error when `name` parameter is undefined', () => {
expect(() => toSvg()).toThrow();
});
test('throws error when passed unknown icon name', () => {
expect(() => toSvg('foo')).toThrow();
});

View File

@@ -0,0 +1,11 @@
{
"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"
}

55
packages/js/src/icon.js Normal file
View File

@@ -0,0 +1,55 @@
import classnames from 'classnames/dedupe';
import DEFAULT_ATTRS from './default-attrs.json';
class Icon {
constructor(name, contents, tags = []) {
this.name = name;
this.contents = contents;
this.tags = tags;
this.attrs = {
...DEFAULT_ATTRS,
...{ class: `feather feather-${name}` },
};
}
/**
* Create an SVG string.
* @param {Object} attrs
* @returns {string}
*/
toSvg(attrs = {}) {
const combinedAttrs = {
...this.attrs,
...attrs,
...{ class: classnames(this.attrs.class, attrs.class) },
};
return `<svg ${attrsToString(combinedAttrs)}>${this.contents}</svg>`;
}
/**
* Return string representation of an `Icon`.
*
* Added for backward compatibility. If old code expects `feather.icons.<name>`
* to be a string, `toString()` will get implicitly called.
*
* @returns {string}
*/
toString() {
return this.contents;
}
}
/**
* Convert attributes object to string of HTML attributes.
* @param {Object} attrs
* @returns {string}
*/
function attrsToString(attrs) {
return Object.keys(attrs)
.map(key => `${key}="${attrs[key]}"`)
.join(' ');
}
export default Icon;

10
packages/js/src/icons.js Normal file
View File

@@ -0,0 +1,10 @@
import Icon from './icon';
import icons from '../dist/icons.json';
import tags from './tags.json';
export default Object.keys(icons)
.map(key => new Icon(key, icons[key], tags[key]))
.reduce((object, icon) => {
object[icon.name] = icon;
return object;
}, {});

5
packages/js/src/index.js Normal file
View File

@@ -0,0 +1,5 @@
import icons from './icons';
import toSvg from './to-svg';
import replace from './replace';
module.exports = { icons, toSvg, replace };

View File

@@ -0,0 +1,60 @@
/* eslint-env browser */
import classnames from 'classnames/dedupe';
import icons from './icons';
/**
* Replace all HTML elements that have a `data-feather` attribute with SVG markup
* corresponding to the element's `data-feather` attribute value.
* @param {Object} attrs
*/
function replace(attrs = {}) {
if (typeof document === 'undefined') {
throw new Error('`feather.replace()` only works in a browser environment.');
}
const elementsToReplace = document.querySelectorAll('[data-feather]');
Array.from(elementsToReplace).forEach(element =>
replaceElement(element, attrs),
);
}
/**
* Replace a single HTML element with SVG markup
* corresponding to the element's `data-feather` attribute value.
* @param {HTMLElement} element
* @param {Object} attrs
*/
function replaceElement(element, attrs = {}) {
const elementAttrs = getAttrs(element);
const name = elementAttrs['data-feather'];
delete elementAttrs['data-feather'];
const svgString = icons[name].toSvg({
...attrs,
...elementAttrs,
...{ class: classnames(attrs.class, elementAttrs.class) },
});
const svgDocument = new DOMParser().parseFromString(
svgString,
'image/svg+xml',
);
const svgElement = svgDocument.querySelector('svg');
element.parentNode.replaceChild(svgElement, element);
}
/**
* Get the attributes of an HTML element.
* @param {HTMLElement} element
* @returns {Object}
*/
function getAttrs(element) {
return Array.from(element.attributes).reduce((attrs, attr) => {
attrs[attr.name] = attr.value;
return attrs;
}, {});
}
export default replace;

237
packages/js/src/tags.json Normal file
View File

@@ -0,0 +1,237 @@
{
"activity": ["pulse", "health", "action", "motion"],
"airplay": ["stream", "cast", "mirroring"],
"alert-circle": ["warning", "alert", "danger"],
"alert-octagon": ["warning", "alert", "danger"],
"alert-triangle": ["warning", "alert", "danger"],
"align-center": ["text alignment", "center"],
"align-justify": ["text alignment", "justified"],
"align-left": ["text alignment", "left"],
"align-right": ["text alignment", "right"],
"anchor": [],
"archive": ["index", "box"],
"at-sign": ["mention", "at", "email", "message"],
"award": ["achievement", "badge"],
"aperture": ["camera", "photo"],
"bar-chart": ["statistics", "diagram", "graph"],
"bar-chart-2": ["statistics", "diagram", "graph"],
"battery": ["power", "electricity"],
"battery-charging": ["power", "electricity"],
"bell": ["alarm", "notification", "sound"],
"bell-off": ["alarm", "notification", "silent"],
"bluetooth": ["wireless"],
"book-open": ["read", "library"],
"book": ["read", "dictionary", "booklet", "magazine", "library"],
"bookmark": ["read", "clip", "marker", "tag"],
"box": ["cube"],
"briefcase": ["work", "bag", "baggage", "folder"],
"calendar": ["date"],
"camera": ["photo"],
"cast": ["chromecast", "airplay"],
"circle": ["off", "zero", "record"],
"clipboard": ["copy"],
"clock": ["time", "watch", "alarm"],
"cloud-drizzle": ["weather", "shower"],
"cloud-lightning": ["weather", "bolt"],
"cloud-rain": ["weather"],
"cloud-snow": ["weather", "blizzard"],
"cloud": ["weather"],
"codepen": ["logo"],
"codesandbox": ["logo"],
"code": ["source", "programming"],
"coffee": ["drink", "cup", "mug", "tea", "cafe", "hot", "beverage"],
"columns": ["layout"],
"command": ["keyboard", "cmd", "terminal", "prompt"],
"compass": ["navigation", "safari", "travel", "direction"],
"copy": ["clone", "duplicate"],
"corner-down-left": ["arrow", "return"],
"corner-down-right": ["arrow"],
"corner-left-down": ["arrow"],
"corner-left-up": ["arrow"],
"corner-right-down": ["arrow"],
"corner-right-up": ["arrow"],
"corner-up-left": ["arrow"],
"corner-up-right": ["arrow"],
"cpu": ["processor", "technology"],
"credit-card": ["purchase", "payment", "cc"],
"crop": ["photo", "image"],
"crosshair": ["aim", "target"],
"database": ["storage", "memory"],
"delete": ["remove"],
"disc": ["album", "cd", "dvd", "music"],
"dollar-sign": ["currency", "money", "payment"],
"droplet": ["water"],
"edit": ["pencil", "change"],
"edit-2": ["pencil", "change"],
"edit-3": ["pencil", "change"],
"eye": ["view", "watch"],
"eye-off": ["view", "watch", "hide", "hidden"],
"external-link": ["outbound"],
"facebook": ["logo", "social"],
"fast-forward": ["music"],
"figma": ["logo", "design", "tool"],
"file-minus": ["delete", "remove", "erase"],
"file-plus": ["add", "create", "new"],
"file-text": ["data", "txt", "pdf"],
"film": ["movie", "video"],
"filter": ["funnel", "hopper"],
"flag": ["report"],
"folder-minus": ["directory"],
"folder-plus": ["directory"],
"folder": ["directory"],
"framer": ["logo", "design", "tool"],
"frown": ["emoji", "face", "bad", "sad", "emotion"],
"gift": ["present", "box", "birthday", "party"],
"git-branch": ["code", "version control"],
"git-commit": ["code", "version control"],
"git-merge": ["code", "version control"],
"git-pull-request": ["code", "version control"],
"github": ["logo", "version control"],
"gitlab": ["logo", "version control"],
"globe": ["world", "browser", "language", "translate"],
"hard-drive": ["computer", "server", "memory", "data"],
"hash": ["hashtag", "number", "pound"],
"headphones": ["music", "audio", "sound"],
"heart": ["like", "love", "emotion"],
"help-circle": ["question mark"],
"hexagon": ["shape", "node.js", "logo"],
"home": ["house", "living"],
"image": ["picture"],
"inbox": ["email"],
"instagram": ["logo", "camera"],
"key": ["password", "login", "authentication", "secure"],
"layers": ["stack"],
"layout": ["window", "webpage"],
"life-bouy": ["help", "life ring", "support"],
"link": ["chain", "url"],
"link-2": ["chain", "url"],
"linkedin": ["logo", "social media"],
"list": ["options"],
"lock": ["security", "password", "secure"],
"log-in": ["sign in", "arrow", "enter"],
"log-out": ["sign out", "arrow", "exit"],
"mail": ["email", "message"],
"map-pin": ["location", "navigation", "travel", "marker"],
"map": ["location", "navigation", "travel"],
"maximize": ["fullscreen"],
"maximize-2": ["fullscreen", "arrows", "expand"],
"meh": ["emoji", "face", "neutral", "emotion"],
"menu": ["bars", "navigation", "hamburger"],
"message-circle": ["comment", "chat"],
"message-square": ["comment", "chat"],
"mic-off": ["record", "sound", "mute"],
"mic": ["record", "sound", "listen"],
"minimize": ["exit fullscreen", "close"],
"minimize-2": ["exit fullscreen", "arrows", "close"],
"minus": ["subtract"],
"monitor": ["tv", "screen", "display"],
"moon": ["dark", "night"],
"more-horizontal": ["ellipsis"],
"more-vertical": ["ellipsis"],
"mouse-pointer": ["arrow", "cursor"],
"move": ["arrows"],
"music": ["note"],
"navigation": ["location", "travel"],
"navigation-2": ["location", "travel"],
"octagon": ["stop"],
"package": ["box", "container"],
"paperclip": ["attachment"],
"pause": ["music", "stop"],
"pause-circle": ["music", "audio", "stop"],
"pen-tool": ["vector", "drawing"],
"percent": ["discount"],
"phone-call": ["ring"],
"phone-forwarded": ["call"],
"phone-incoming": ["call"],
"phone-missed": ["call"],
"phone-off": ["call", "mute"],
"phone-outgoing": ["call"],
"phone": ["call"],
"play": ["music", "start"],
"pie-chart": ["statistics", "diagram"],
"play-circle": ["music", "start"],
"plus": ["add", "new"],
"plus-circle": ["add", "new"],
"plus-square": ["add", "new"],
"pocket": ["logo", "save"],
"power": ["on", "off"],
"printer": ["fax", "office", "device"],
"radio": ["signal"],
"refresh-cw": ["synchronise", "arrows"],
"refresh-ccw": ["arrows"],
"repeat": ["loop", "arrows"],
"rewind": ["music"],
"rotate-ccw": ["arrow"],
"rotate-cw": ["arrow"],
"rss": ["feed", "subscribe"],
"save": ["floppy disk"],
"scissors": ["cut"],
"search": ["find", "magnifier", "magnifying glass"],
"send": ["message", "mail", "email", "paper airplane", "paper aeroplane"],
"settings": ["cog", "edit", "gear", "preferences"],
"share-2": ["network", "connections"],
"shield": ["security", "secure"],
"shield-off": ["security", "insecure"],
"shopping-bag": ["ecommerce", "cart", "purchase", "store"],
"shopping-cart": ["ecommerce", "cart", "purchase", "store"],
"shuffle": ["music"],
"skip-back": ["music"],
"skip-forward": ["music"],
"slack": ["logo"],
"slash": ["ban", "no"],
"sliders": ["settings", "controls"],
"smartphone": ["cellphone", "device"],
"smile": ["emoji", "face", "happy", "good", "emotion"],
"speaker": ["audio", "music"],
"star": ["bookmark", "favorite", "like"],
"stop-circle": ["media", "music"],
"sun": ["brightness", "weather", "light"],
"sunrise": ["weather", "time", "morning", "day"],
"sunset": ["weather", "time", "evening", "night"],
"tablet": ["device"],
"tag": ["label"],
"target": ["logo", "bullseye"],
"terminal": ["code", "command line", "prompt"],
"thermometer": ["temperature", "celsius", "fahrenheit", "weather"],
"thumbs-down": ["dislike", "bad", "emotion"],
"thumbs-up": ["like", "good", "emotion"],
"toggle-left": ["on", "off", "switch"],
"toggle-right": ["on", "off", "switch"],
"tool": ["settings", "spanner"],
"trash": ["garbage", "delete", "remove", "bin"],
"trash-2": ["garbage", "delete", "remove", "bin"],
"triangle": ["delta"],
"truck": ["delivery", "van", "shipping", "transport", "lorry"],
"tv": ["television", "stream"],
"twitch": ["logo"],
"twitter": ["logo", "social"],
"type": ["text"],
"umbrella": ["rain", "weather"],
"unlock": ["security"],
"user-check": ["followed", "subscribed"],
"user-minus": ["delete", "remove", "unfollow", "unsubscribe"],
"user-plus": ["new", "add", "create", "follow", "subscribe"],
"user-x": ["delete", "remove", "unfollow", "unsubscribe", "unavailable"],
"user": ["person", "account"],
"users": ["group"],
"video-off": ["camera", "movie", "film"],
"video": ["camera", "movie", "film"],
"voicemail": ["phone"],
"volume": ["music", "sound", "mute"],
"volume-1": ["music", "sound"],
"volume-2": ["music", "sound"],
"volume-x": ["music", "sound", "mute"],
"watch": ["clock", "time"],
"wifi-off": ["disabled"],
"wifi": ["connection", "signal", "wireless"],
"wind": ["weather", "air"],
"x-circle": ["cancel", "close", "delete", "remove", "times", "clear"],
"x-octagon": ["delete", "stop", "alert", "warning", "times", "clear"],
"x-square": ["cancel", "close", "delete", "remove", "times", "clear"],
"x": ["cancel", "close", "delete", "remove", "times", "clear"],
"youtube": ["logo", "video", "play"],
"zap-off": ["flash", "camera", "lightning"],
"zap": ["flash", "camera", "lightning"],
"zoom-in": ["magnifying glass"],
"zoom-out": ["magnifying glass"]
}

30
packages/js/src/to-svg.js Normal file
View File

@@ -0,0 +1,30 @@
import icons from './icons';
/**
* Create an SVG string.
* @deprecated
* @param {string} name
* @param {Object} attrs
* @returns {string}
*/
function toSvg(name, attrs = {}) {
console.warn(
'feather.toSvg() is deprecated. Please use feather.icons[name].toSvg() instead.',
);
if (!name) {
throw new Error('The required `key` (icon name) parameter is missing.');
}
if (!icons[name]) {
throw new Error(
`No icon matching '${
name
}'. See the complete list of icons at https://feathericons.com`,
);
}
return icons[name].toSvg(attrs);
}
export default toSvg;