react-feather#Terminal JavaScript Examples

The following examples show how to use react-feather#Terminal. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: Header.js    From popper.js.org with MIT License 6 votes vote down vote up 
Header = () => (
  <HeaderStyled>
    <picture>
      <source
        srcset={popperLogoOutlined}
        media="(prefers-color-scheme: dark)"
      />
      <source
        srcset={popperLogo}
        media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
      />
      <Logo src={popperLogo} alt="Popper logo" draggable="false" width="200" height="200" />
    </picture>

    <Slogan>
      Tooltip &amp; Popover <br /> Positioning Engine
    </Slogan>
    <SubSlogan>
      Weighs just <strong>3 kB!</strong>
    </SubSlogan>
    <div
      css={css`
        margin-top: 30px;
      `}
    >
      <a
        css={buttonCss}
        href="https://github.com/popperjs/popper-core"
        rel="nofollow noreferrer"
      >
        <GitHub css={iconCss} /> Star on GitHub
      </a>
      <Link to="/docs/v2/" css={buttonCss}>
        <Terminal css={iconCss} />
        Documentation
      </Link>
    </div>
  </HeaderStyled>
)
Example #2
Source File: 3.9.0.jsx    From vertx-web-site.github.io with Apache License 2.0 5 votes vote down vote up 
categories = [
  {
    id: "core",
    name: "Core",
    icon: <Box />
  },
  {
    id: "web",
    name: "Web",
    icon: <Globe />
  },
  {
    id: "databases",
    name: "Databases",
    icon: <Database />
  },
  {
    id: "reactive",
    name: "Reactive",
    icon: <Feather />
  },
  {
    id: "microservices",
    name: "Microservices",
    icon: <Search />
  },
  {
    id: "mqtt",
    name: "MQTT",
    icon: <Inbox />
  },
  {
    id: "authentication-and-authorization",
    name: "Authentication and authorization",
    icon: <Key />
  },
  {
    id: "messaging",
    name: "Messaging",
    icon: <Send />
  },
  {
    id: "integration",
    name: "Integration",
    icon: <Inbox />
  },
  {
    id: "event-bus-bridges",
    name: "Event bus bridges",
    icon: <Share2 />
  },
  {
    id: "devops",
    name: "DevOps",
    icon: <Terminal />
  },
  {
    id: "testing",
    name: "Testing",
    icon: <CheckCircle />
  },
  {
    id: "clustering",
    name: "Clustering",
    icon: <Grid />
  },
  {
    id: "services",
    name: "Services",
    icon: <PhoneCall />
  }
]
Example #3
Source File: Navbar.js    From webDevsCom with MIT License 4 votes vote down vote up 
Navbar = () => {
  const themeContext = useContext(ThemeContext);
  const { isDarkMode, toggleTheme } = themeContext;
  const active = window.location.pathname;
  document.addEventListener('DOMContentLoaded', () => {
    const $navbarBurgers = Array.prototype.slice.call(
      document.querySelectorAll('.navbar-burger'),
      0
    );
    const anchors = document.querySelectorAll('.navbar-item');
    anchors.forEach((anchor) => {
      anchor.addEventListener('click', () => {
        document
          .querySelector('#navbarBasicExample')
          .classList.remove('is-active');

        document.querySelector('.navbar-burger').classList.remove('is-active');
      });
    });

    if ($navbarBurgers.length > 0) {
      $navbarBurgers.forEach((el) => {
        el.addEventListener('click', () => {
          const target = el.dataset.target;
          const $target = document.getElementById(target);
          el.classList.toggle('is-active');
          $target.classList.toggle('is-active');
        });
      });
    }
  });

  return (
    <nav
      className='navbar is-fixed-top is-light'
      role='navigation'
      id='navbar'
      aria-label='main navigation'
    >
      <div className='navbar-brand'>
        <Link className='navbar-item' id='brand' to='/'>
          <Terminal color={ isDarkMode ? '#FFCC4D' : 'blue'} />
          &emsp;WEBDEVSCOM
        </Link>

        <div
          role='button'
          className='navbar-burger burger'
          aria-label='menu'
          aria-expanded='false'
          data-target='navbarBasicExample'
        >
          <span aria-hidden='true'></span>
          <span aria-hidden='true'></span>
          <span aria-hidden='true'></span>
        </div>
      </div>

      <div id='navbarBasicExample' className='navbar-menu'>
        <div className='navbar-end'>
          <Link
            className={`navbar-item ${active === '/' ? 'is-active' : ''}`}
            to='/'
          >
            Home
          </Link>

          <Link
            className={`navbar-item ${active.includes('/resources') ? 'is-active' : ''
              }`}
            to='/resources'
          >
            Resources
          </Link>

          <Link
            className={`navbar-item ${active === '/bookmarked' ? 'is-active' : ''
              }`}
            to='/bookmarked'
          >
            My BookMarks
          </Link>

          <a
            className='navbar-item'
            rel='noopener noreferrer'
            target='_blank'
            href='https://github.com/WebDevsCom/webDevsCom/graphs/contributors'
          >
            Contributors
          </a>
          <div
            className='navbar-item'
            style={{ cursor: 'pointer' }}
            onClick={toggleTheme}
          >
            {isDarkMode ? <Sun color='#00d1b2' /> : <Moon color='#00d1b2' />}
          </div>
        </div>
      </div>
    </nav>
  );
}