initial set of feather icons
This commit is contained in:
Ian J. Miller
commit
3472a4efb0
180
.eslintrc
Normal file
180
.eslintrc
Normal file
@ -0,0 +1,180 @@
|
|||||||
|
{
|
||||||
|
root: true,
|
||||||
|
parser: 'babel-eslint',
|
||||||
|
plugins: [/*'import', */'jsx-a11y', 'react'],
|
||||||
|
env: {
|
||||||
|
browser: true,
|
||||||
|
commonjs: true,
|
||||||
|
es6: true,
|
||||||
|
jest: true,
|
||||||
|
node: true
|
||||||
|
},
|
||||||
|
parserOptions: {
|
||||||
|
ecmaVersion: 6,
|
||||||
|
sourceType: 'module',
|
||||||
|
ecmaFeatures: {
|
||||||
|
jsx: true,
|
||||||
|
generators: true,
|
||||||
|
experimentalObjectRestSpread: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
settings: {
|
||||||
|
'import/ignore': [
|
||||||
|
'node_modules',
|
||||||
|
'\\.(json|css|jpg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm)$',
|
||||||
|
],
|
||||||
|
'import/extensions': ['.js'],
|
||||||
|
'import/resolver': {
|
||||||
|
node: {
|
||||||
|
extensions: ['.js', '.json']
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
rules: {
|
||||||
|
// http://eslint.org/docs/rules/
|
||||||
|
'array-callback-return': 'warn',
|
||||||
|
'camelcase': 'warn',
|
||||||
|
'curly': 'warn',
|
||||||
|
'default-case': ['warn', { commentPattern: '^no default$' }],
|
||||||
|
'dot-location': ['warn', 'property'],
|
||||||
|
'eol-last': 'warn',
|
||||||
|
'eqeqeq': ['warn', 'always'],
|
||||||
|
'indent': ['warn', 2, { "SwitchCase": 1 }],
|
||||||
|
'guard-for-in': 'warn',
|
||||||
|
'keyword-spacing': 'warn',
|
||||||
|
'new-parens': 'warn',
|
||||||
|
'no-array-constructor': 'warn',
|
||||||
|
'no-caller': 'warn',
|
||||||
|
'no-cond-assign': ['warn', 'always'],
|
||||||
|
'no-const-assign': 'warn',
|
||||||
|
'no-control-regex': 'warn',
|
||||||
|
'no-delete-var': 'warn',
|
||||||
|
'no-dupe-args': 'warn',
|
||||||
|
'no-dupe-class-members': 'warn',
|
||||||
|
'no-dupe-keys': 'warn',
|
||||||
|
'no-duplicate-case': 'warn',
|
||||||
|
'no-empty-character-class': 'warn',
|
||||||
|
'no-empty-pattern': 'warn',
|
||||||
|
'no-eval': 'warn',
|
||||||
|
'no-ex-assign': 'warn',
|
||||||
|
'no-extend-native': 'warn',
|
||||||
|
'no-extra-bind': 'warn',
|
||||||
|
'no-extra-label': 'warn',
|
||||||
|
'no-fallthrough': 'warn',
|
||||||
|
'no-func-assign': 'warn',
|
||||||
|
'no-global-assign': 'warn',
|
||||||
|
'no-implied-eval': 'warn',
|
||||||
|
'no-invalid-regexp': 'warn',
|
||||||
|
'no-iterator': 'warn',
|
||||||
|
'no-label-var': 'warn',
|
||||||
|
'no-labels': ['warn', { allowLoop: false, allowSwitch: false }],
|
||||||
|
'no-lone-blocks': 'warn',
|
||||||
|
'no-loop-func': 'warn',
|
||||||
|
'no-mixed-operators': ['warn', {
|
||||||
|
groups: [
|
||||||
|
['&', '|', '^', '~', '<<', '>>', '>>>'],
|
||||||
|
['==', '!=', '===', '!==', '>', '>=', '<', '<='],
|
||||||
|
['&&', '||'],
|
||||||
|
['in', 'instanceof']
|
||||||
|
],
|
||||||
|
allowSamePrecedence: false
|
||||||
|
}],
|
||||||
|
'no-multi-str': 'warn',
|
||||||
|
'no-new-func': 'warn',
|
||||||
|
'no-new-object': 'warn',
|
||||||
|
'no-new-symbol': 'warn',
|
||||||
|
'no-new-wrappers': 'warn',
|
||||||
|
'no-obj-calls': 'warn',
|
||||||
|
'no-octal': 'warn',
|
||||||
|
'no-octal-escape': 'warn',
|
||||||
|
'no-redeclare': 'warn',
|
||||||
|
'no-regex-spaces': 'warn',
|
||||||
|
'no-restricted-syntax': [
|
||||||
|
'warn',
|
||||||
|
'LabeledStatement',
|
||||||
|
'WithStatement',
|
||||||
|
],
|
||||||
|
'no-script-url': 'warn',
|
||||||
|
'no-self-assign': 'warn',
|
||||||
|
'no-self-compare': 'warn',
|
||||||
|
'no-sequences': 'warn',
|
||||||
|
'no-shadow-restricted-names': 'warn',
|
||||||
|
'no-sparse-arrays': 'warn',
|
||||||
|
'no-template-curly-in-string': 'warn',
|
||||||
|
'no-this-before-super': 'warn',
|
||||||
|
'no-throw-literal': 'warn',
|
||||||
|
'no-undef': 'warn',
|
||||||
|
'no-unexpected-multiline': 'warn',
|
||||||
|
'no-unreachable': 'warn',
|
||||||
|
'no-unsafe-negation': 'warn',
|
||||||
|
'no-unused-expressions': 'warn',
|
||||||
|
'no-unused-labels': 'warn',
|
||||||
|
'no-unused-vars': ['warn', { vars: 'local', args: 'none' }],
|
||||||
|
'no-use-before-define': ['warn', 'nofunc'],
|
||||||
|
'no-useless-computed-key': 'warn',
|
||||||
|
'no-useless-concat': 'warn',
|
||||||
|
'no-useless-constructor': 'warn',
|
||||||
|
'no-useless-escape': 'warn',
|
||||||
|
'no-useless-rename': ['warn', {
|
||||||
|
ignoreDestructuring: false,
|
||||||
|
ignoreImport: false,
|
||||||
|
ignoreExport: false,
|
||||||
|
}],
|
||||||
|
'no-with': 'warn',
|
||||||
|
'no-whitespace-before-property': 'warn',
|
||||||
|
'object-curly-spacing': ['warn', 'always'],
|
||||||
|
'operator-assignment': ['warn', 'always'],
|
||||||
|
radix: 'warn',
|
||||||
|
'require-yield': 'warn',
|
||||||
|
'rest-spread-spacing': ['warn', 'never'],
|
||||||
|
'semi': 'warn',
|
||||||
|
strict: ['warn', 'never'],
|
||||||
|
'unicode-bom': ['warn', 'never'],
|
||||||
|
'use-isnan': 'warn',
|
||||||
|
'valid-typeof': 'warn',
|
||||||
|
'react/jsx-boolean-value': 'warn',
|
||||||
|
'react/jsx-closing-bracket-location': 'warn',
|
||||||
|
'react/jsx-curly-spacing': 'warn',
|
||||||
|
'react/jsx-equals-spacing': ['warn', 'never'],
|
||||||
|
'react/jsx-first-prop-new-line': ['warn', 'multiline'],
|
||||||
|
'react/jsx-handler-names': 'warn',
|
||||||
|
'react/jsx-indent': ['warn', 2],
|
||||||
|
'react/jsx-indent-props': ['warn', 2],
|
||||||
|
'react/jsx-key': 'warn',
|
||||||
|
'react/jsx-max-props-per-line': 'warn',
|
||||||
|
'react/jsx-no-bind': ['warn', {'allowArrowFunctions': true}],
|
||||||
|
'react/jsx-no-comment-textnodes': 'warn',
|
||||||
|
'react/jsx-no-duplicate-props': ['warn', { ignoreCase: true }],
|
||||||
|
'react/jsx-no-undef': 'warn',
|
||||||
|
'react/jsx-pascal-case': ['warn', {
|
||||||
|
allowAllCaps: true,
|
||||||
|
ignore: [],
|
||||||
|
}],
|
||||||
|
'react/jsx-sort-props': 'warn',
|
||||||
|
'react/jsx-tag-spacing': 'warn',
|
||||||
|
'react/jsx-uses-react': 'warn',
|
||||||
|
'react/jsx-uses-vars': 'warn',
|
||||||
|
'react/jsx-wrap-multilines': 'warn',
|
||||||
|
'react/no-deprecated': 'warn',
|
||||||
|
'react/no-did-mount-set-state': 'warn',
|
||||||
|
'react/no-did-update-set-state': 'warn',
|
||||||
|
'react/no-direct-mutation-state': 'warn',
|
||||||
|
'react/no-is-mounted': 'warn',
|
||||||
|
'react/no-unused-prop-types': 'warn',
|
||||||
|
'react/prefer-es6-class': 'warn',
|
||||||
|
'react/prefer-stateless-function': 'warn',
|
||||||
|
'react/prop-types': 'warn',
|
||||||
|
'react/react-in-jsx-scope': 'warn',
|
||||||
|
'react/require-render-return': 'warn',
|
||||||
|
'react/self-closing-comp': 'warn',
|
||||||
|
'react/sort-comp': 'warn',
|
||||||
|
'react/sort-prop-types': 'warn',
|
||||||
|
'react/style-prop-object': 'warn',
|
||||||
|
'react/void-dom-elements-no-children': 'warn',
|
||||||
|
// https://github.com/evcohen/eslint-plugin-jsx-a11y/tree/master/docs/rules
|
||||||
|
'jsx-a11y/aria-role': 'warn',
|
||||||
|
'jsx-a11y/img-has-alt': 'warn',
|
||||||
|
'jsx-a11y/img-redundant-alt': 'warn',
|
||||||
|
'jsx-a11y/no-access-key': 'warn'
|
||||||
|
}
|
||||||
|
}
|
||||||
4
.gitignore
vendored
Normal file
4
.gitignore
vendored
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
.DS_Store
|
||||||
|
build
|
||||||
|
node_modules
|
||||||
|
*.log
|
||||||
2
.npmignore
Normal file
2
.npmignore
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
.babelrc
|
||||||
|
src
|
||||||
15
README.md
Normal file
15
README.md
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
Feather Icons React
|
||||||
|
|
||||||
|
`npm install --save feather-icons-react`
|
||||||
|
|
||||||
|
This package lets you use Feather Icons as a React Component.
|
||||||
|
Feather Icons is an svg font library by Cole Bemis (https://feathericons.com/).
|
||||||
|
|
||||||
|
Example usage:
|
||||||
|
`import FeatherIcon from 'feather-icons-react';`
|
||||||
|
`<FeatherIcon icon="close" />`
|
||||||
|
Setting a size:
|
||||||
|
Size can be passed as either string or number.
|
||||||
|
e.g.: `<FeatherIcon icon="copy" size="24" />` or `<... size={24} />`
|
||||||
|
|
||||||
|
The icon names can all be referenced at: https://feathericons.com/
|
||||||
6732
package-lock.json
generated
Normal file
6732
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
45
package.json
Normal file
45
package.json
Normal file
@ -0,0 +1,45 @@
|
|||||||
|
{
|
||||||
|
"name": "feather-icons-react",
|
||||||
|
"version": "0.0.1",
|
||||||
|
"description": "Feather Icons as a React component.",
|
||||||
|
"main": "index.js",
|
||||||
|
"scripts": {
|
||||||
|
"test": "npm run test",
|
||||||
|
"build": "babel src -d build",
|
||||||
|
"lint": "eslint src/**; exit 0",
|
||||||
|
"lint:watch": "esw -w lib/**",
|
||||||
|
"prepublish": "npm run build"
|
||||||
|
},
|
||||||
|
"repository": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "git+https://github.com/ianmiller347/feather-icons-react.git"
|
||||||
|
},
|
||||||
|
"keywords": [
|
||||||
|
"feather",
|
||||||
|
"icons",
|
||||||
|
"react",
|
||||||
|
"svg"
|
||||||
|
],
|
||||||
|
"author": "Ian J. Miller",
|
||||||
|
"license": "ISC",
|
||||||
|
"bugs": {
|
||||||
|
"url": "https://github.com/ianmiller347/feather-icons-react/issues"
|
||||||
|
},
|
||||||
|
"homepage": "https://github.com/ianmiller347/feather-icons-react#readme",
|
||||||
|
"devDependencies": {
|
||||||
|
"prop-types": "^15.6.0",
|
||||||
|
"react": "^16.0.0",
|
||||||
|
"react-dom": "^16.0.0",
|
||||||
|
"react-scripts": "^1.0.16",
|
||||||
|
"babel-cli": "^6.26.0",
|
||||||
|
"babel-core": "^6.26.0",
|
||||||
|
"babel-eslint": "^8.0.1",
|
||||||
|
"babel-preset-es2015": "^6.24.1",
|
||||||
|
"babel-preset-react": "^6.24.1",
|
||||||
|
"eslint": "^4.10.0",
|
||||||
|
"eslint-plugin-import": "^2.8.0",
|
||||||
|
"eslint-plugin-jsx-a11y": "^6.0.2",
|
||||||
|
"eslint-plugin-react": "^7.4.0",
|
||||||
|
"eslint-watch": "^3.1.3"
|
||||||
|
}
|
||||||
|
}
|
||||||
113
src/FeatherIcon.js
Normal file
113
src/FeatherIcon.js
Normal file
@ -0,0 +1,113 @@
|
|||||||
|
import React, { Component } from 'react';
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
|
||||||
|
class FeatherIcon extends Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const { icon, size, ...otherProps } = this.props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<svg width={size}
|
||||||
|
height={size}
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeWidth="2"
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
className={`feather feather-${icon}`}
|
||||||
|
{...otherProps}>
|
||||||
|
{this._renderInner(icon)}
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
_renderInner(icon) {
|
||||||
|
/* this is just a bunch of if statements to return the innards of the svg
|
||||||
|
* based on the type of icon it is.
|
||||||
|
* yes it's ok to not use our width and height variables here.
|
||||||
|
* the sizes are relative based on the viewBox attribute.
|
||||||
|
* our width and height variables will scale the SVG accordingly.
|
||||||
|
* <g> is just a wrapper it does nothing except let me use valid JSX markup
|
||||||
|
*/
|
||||||
|
if (icon === 'copy') {
|
||||||
|
return (
|
||||||
|
<g>
|
||||||
|
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
|
||||||
|
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
|
||||||
|
</g>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
if (icon === 'x-circle') {
|
||||||
|
return (
|
||||||
|
<g>
|
||||||
|
<circle cx="12" cy="12" r="10"></circle>
|
||||||
|
<line x1="15" y1="9" x2="9" y2="15"></line>
|
||||||
|
<line x1="9" y1="9" x2="15" y2="15"></line>
|
||||||
|
</g>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
if (icon === 'plus-square') {
|
||||||
|
return (
|
||||||
|
<g>
|
||||||
|
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
|
||||||
|
<line x1="12" y1="8" x2="12" y2="16"></line>
|
||||||
|
<line x1="8" y1="12" x2="16" y2="12"></line>
|
||||||
|
</g>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
if (icon === 'save') {
|
||||||
|
return (
|
||||||
|
<g>
|
||||||
|
<path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"></path>
|
||||||
|
<polyline points="17 21 17 13 7 13 7 21"></polyline>
|
||||||
|
<polyline points="7 3 7 8 15 8"></polyline>
|
||||||
|
</g>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
if (icon === 'delete') {
|
||||||
|
return (
|
||||||
|
<g>
|
||||||
|
<path d="M21 4H8l-7 8 7 8h13a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2z"></path>
|
||||||
|
<line x1="18" y1="9" x2="12" y2="15"></line>
|
||||||
|
<line x1="12" y1="9" x2="18" y2="15"></line>
|
||||||
|
</g>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
if (icon === 'chevron-up') {
|
||||||
|
return (
|
||||||
|
<polyline points="18 15 12 9 6 15"></polyline>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
if (icon === 'chevron-down') {
|
||||||
|
return (
|
||||||
|
<polyline points="6 9 12 15 18 9"></polyline>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
if (icon === 'info') {
|
||||||
|
return (
|
||||||
|
<g>
|
||||||
|
<circle cx="12" cy="12" r="10"></circle>
|
||||||
|
<line x1="12" y1="16" x2="12" y2="12"></line>
|
||||||
|
<line x1="12" y1="8" x2="12" y2="8"></line>
|
||||||
|
</g>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
FeatherIcon.propTypes = {
|
||||||
|
icon: PropTypes.string.isRequired,
|
||||||
|
size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
|
||||||
|
}
|
||||||
|
|
||||||
|
FeatherIcon.defaultProps = {
|
||||||
|
color: 'currentColor',
|
||||||
|
size: 24
|
||||||
|
}
|
||||||
|
|
||||||
|
export default FeatherIcon;
|
||||||
1
src/index.js
Normal file
1
src/index.js
Normal file
@ -0,0 +1 @@
|
|||||||
|
export FeatherIcon from './FeatherIcon';
|
||||||
Loading…
Reference in New Issue
Block a user