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