How to use react-feather - 10 common examples

To help you get started, we’ve selected a few react-feather examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

contiamo / operational-ui / packages / components / lib / Icon / Icon.js View on Github

var Icon = function (props) {
    var color = theme_1.expandColor(props.theme, props.color) || "currentColor";
    var defaultSize = props.theme.spacing * 1.5;
    if (ReactFeather.hasOwnProperty(props.name)) {
        var Comp = ReactFeather[props.name];
        return React.createElement(Comp, { size: props.size || defaultSize, color: color });
    }
    // @todo -> type this better
    if (BrandIcons.hasOwnProperty(props.name)) {
        var Comp = BrandIcons.OperationalUI;
        if (props.name === "Labs") {
            Comp = BrandIcons.Labs;
        }
        if (props.name === "Pantheon") {
            Comp = BrandIcons.Pantheon;
        }
        if (props.name === "Contiamo") {
            Comp = BrandIcons.Contiamo;
        }
        return React.createElement(Comp, { size: props.size || defaultSize, color: color, rotation: props.rotation, colored: props.colored });

elifesciences / elife-xpub / packages / component-static-pages / client / components / List.js View on Github

const StyledOrderedList = styled.ol`
  ${props => sharedListStyling};

  counter-reset: li; /* initiate a counter */

  > li:before {
    content: counter(li) '.'; /* Use the counter + a full stop as the content */
    counter-increment: li; /* Increment the counter by 1 */
  }

  > li {
    list-style: none; /* Disable the normal item numbering */
  }
`

List.Ordered = StyledOrderedList
List.Unordered = StyledUnorderedList

export default List

elifesciences / elife-xpub / packages / component-static-pages / client / components / List.js View on Github

${props => sharedListStyling};

  counter-reset: li; /* initiate a counter */

  > li:before {
    content: counter(li) '.'; /* Use the counter + a full stop as the content */
    counter-increment: li; /* Increment the counter by 1 */
  }

  > li {
    list-style: none; /* Disable the normal item numbering */
  }
`

List.Ordered = StyledOrderedList
List.Unordered = StyledUnorderedList

export default List

NiceDash / Vibe / src / vibe / components / SidebarNav / components / NavDropdownItem.js View on Github

render() {
    const { item } = this.props;
    const isExpanded = this.state.open ? 'open' : '';
    const Icon = item.icon ? Feather[item.icon] : null;
    const ExpandIcon = this.state.open
      ? Feather.ChevronDown
      : Feather.ChevronRight;
    return (
      <li>
        <a role="button" href="#!">
          {item.icon &amp;&amp; Icon &amp;&amp; }
          <span>{item.name}</span>{' '}
          {item.badge &amp;&amp; (
            
          )}
          
        </a>
        {(this.state.open || this.props.isSidebarCollapsed) &amp;&amp; (
          <ul>
            {item.children.map((item, index) =&gt; (
              
            ))}
          </ul></li>

contiamo / operational-ui / packages / components / lib / Paginator.js View on Github

var Paginator = function (_a) {
    var _b = _a.activeColor, activeColor = _b === void 0 ? "info" : _b, _c = _a.maxVisible, maxVisible = _c === void 0 ? 3 : _c, _d = _a.onChange, onChange = _d === void 0 ? function () { } : _d, pageCount = _a.pageCount, _e = _a.page, page = _e === void 0 ? 1 : _e, id = _a.id, css = _a.css, className = _a.className;
    var controlProps = { pageCount: pageCount, page: page, onChange: onChange };
    return (React.createElement(Container, { id: id, css: css, className: className },
        React.createElement(ButtonGroup_1.default, { className: "co_bgrp" },
            React.createElement(PaginatorControl, __assign({ type: "first" }, controlProps),
                React.createElement(Icon.ChevronsLeft, { size: "11" })),
            React.createElement(PaginatorControl, __assign({ type: "previous" }, controlProps),
                React.createElement(Icon.ChevronLeft, { size: "11" })),
            createPagesFragment({ activeColor: activeColor, pageCount: pageCount, maxVisible: maxVisible, page: page, onChange: onChange }),
            React.createElement(PaginatorControl, __assign({ type: "next" }, controlProps),
                React.createElement(Icon.ChevronRight, { size: "11" })),
            React.createElement(PaginatorControl, __assign({ type: "last" }, controlProps),
                React.createElement(Icon.ChevronsRight, { size: "11" })))));
};
exports.default = Paginator;

contiamo / operational-ui / packages / components / lib / Paginator / Paginator.js View on Github

var Paginator = function (_a) {
    var _b = _a.maxVisible, maxVisible = _b === void 0 ? 3 : _b, _c = _a.onChange, onChange = _c === void 0 ? function () { } : _c, pageCount = _a.pageCount, _d = _a.page, page = _d === void 0 ? 1 : _d, id = _a.id, css = _a.css, className = _a.className;
    var controlProps = { pageCount: pageCount, page: page, onChange: onChange };
    return (React.createElement(Container, { id: id, css: css, className: className },
        React.createElement(PaginatorControl, __assign({ type: "first" }, controlProps),
            React.createElement(Icon.ChevronsLeft, { size: "11" })),
        React.createElement(PaginatorControl, __assign({ type: "previous" }, controlProps),
            React.createElement(Icon.ChevronLeft, { size: "11" })),
        createPagesFragment({ pageCount: pageCount, maxVisible: maxVisible, page: page, onChange: onChange }),
        React.createElement(PaginatorControl, __assign({ type: "next" }, controlProps),
            React.createElement(Icon.ChevronRight, { size: "11" })),
        React.createElement(PaginatorControl, __assign({ type: "last" }, controlProps),
            React.createElement(Icon.ChevronsRight, { size: "11" }))));
};
exports.default = Paginator;

meetalva / alva / packages / components / src / link-icon / index.tsx View on Github

export const LinkIcon: React.SFC = props =&gt; {
	const IconImage = Icon.hasOwnProperty(props.icon) ? Icon[props.icon] : Icon.Box;

	return (
		
			
			
			{props.children}
		
	);
};

meetalva / alva / packages / components / src / teaser / teaser.tsx View on Github

export const Teaser: React.SFC = props =&gt; {
	const IconImage = Icon.hasOwnProperty(props.icon) ? Icon[props.icon || 'Box'] : Icon.Box;

	return (
		
			
			
			{props.headline}
			
			
				{props.description}
			
		
	);
};

contiamo / operational-ui / packages / components / lib / Paginator.js View on Github

var Paginator = function (_a) {
    var _b = _a.activeColor, activeColor = _b === void 0 ? "info" : _b, _c = _a.maxVisible, maxVisible = _c === void 0 ? 3 : _c, _d = _a.onChange, onChange = _d === void 0 ? function () { } : _d, pageCount = _a.pageCount, _e = _a.page, page = _e === void 0 ? 1 : _e, id = _a.id, css = _a.css, className = _a.className;
    var controlProps = { pageCount: pageCount, page: page, onChange: onChange };
    return (React.createElement(Container, { id: id, css: css, className: className },
        React.createElement(ButtonGroup_1.default, { className: "co_bgrp" },
            React.createElement(PaginatorControl, __assign({ type: "first" }, controlProps),
                React.createElement(Icon.ChevronsLeft, { size: "11" })),
            React.createElement(PaginatorControl, __assign({ type: "previous" }, controlProps),
                React.createElement(Icon.ChevronLeft, { size: "11" })),
            createPagesFragment({ activeColor: activeColor, pageCount: pageCount, maxVisible: maxVisible, page: page, onChange: onChange }),
            React.createElement(PaginatorControl, __assign({ type: "next" }, controlProps),
                React.createElement(Icon.ChevronRight, { size: "11" })),
            React.createElement(PaginatorControl, __assign({ type: "last" }, controlProps),
                React.createElement(Icon.ChevronsRight, { size: "11" })))));
};
exports.default = Paginator;

contiamo / operational-ui / packages / components / lib / Paginator / Paginator.js View on Github

var Paginator = function (_a) {
    var _b = _a.maxVisible, maxVisible = _b === void 0 ? 3 : _b, _c = _a.onChange, onChange = _c === void 0 ? function () { } : _c, pageCount = _a.pageCount, _d = _a.page, page = _d === void 0 ? 1 : _d, id = _a.id, css = _a.css, className = _a.className;
    var controlProps = { pageCount: pageCount, page: page, onChange: onChange };
    return (React.createElement(Container, { id: id, css: css, className: className },
        React.createElement(PaginatorControl, __assign({ type: "first" }, controlProps),
            React.createElement(Icon.ChevronsLeft, { size: "11" })),
        React.createElement(PaginatorControl, __assign({ type: "previous" }, controlProps),
            React.createElement(Icon.ChevronLeft, { size: "11" })),
        createPagesFragment({ pageCount: pageCount, maxVisible: maxVisible, page: page, onChange: onChange }),
        React.createElement(PaginatorControl, __assign({ type: "next" }, controlProps),
            React.createElement(Icon.ChevronRight, { size: "11" })),
        React.createElement(PaginatorControl, __assign({ type: "last" }, controlProps),
            React.createElement(Icon.ChevronsRight, { size: "11" }))));
};
exports.default = Paginator;

How to use react-feather - 10 common examples

To help you get started, we’ve selected a few react-feather examples, based on popular ways it is used in public projects.

react-feather

Package Health Score

Popular react-feather functions

Similar packages