@ant-design/icons#HomeOutlined JavaScript Examples

The following examples show how to use @ant-design/icons#HomeOutlined. 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: Nav.jsx    From node-project-manager with Apache License 2.0 6 votes vote down vote up 
Nav = ({ user }) => {
  return (
    <Menu mode="horizontal" className="navUsers">
      <Menu.Item>
      <HomeOutlined />
        <Link to="/Home">Inicio</Link>
      </Menu.Item>
      <Menu.Item key="app">
        <Link to="/Projects">
          <AppstoreOutlined />
          Proyectos
        </Link>
      </Menu.Item>
      <Menu.Item>
        <Link to="/Tecnologias">
          <SettingOutlined />
          Tecnologías
        </Link>
      </Menu.Item>
      {user.admin ? (
        <Menu.Item>
          <UserOutlined />
          <Link to="/AdminUser">Usuarios</Link>
        </Menu.Item>
      ) : null}
      {user.admin ? (
        <Menu.Item>
          <MailOutlined />
          <Link to="/Informes">Informes</Link>
        </Menu.Item>
      ) : null}
    </Menu>
  );
}
Example #2
Source File: index.js    From gobench with Apache License 2.0 6 votes vote down vote up 
render() {
    return (
      <div>
        <h5 className="mb-3">
          <strong>Basic</strong>
        </h5>
        <div className="mb-5">
          <Breadcrumb>
            <Breadcrumb.Item>Home</Breadcrumb.Item>
            <Breadcrumb.Item>
              <a href="">Application Center</a>
            </Breadcrumb.Item>
            <Breadcrumb.Item>
              <a href="">Application List</a>
            </Breadcrumb.Item>
            <Breadcrumb.Item>An Application</Breadcrumb.Item>
          </Breadcrumb>
        </div>
        <h5 className="mb-3">
          <strong>With an Icon</strong>
        </h5>
        <div className="mb-5">
          <Breadcrumb>
            <Breadcrumb.Item href="">
              <HomeOutlined />
            </Breadcrumb.Item>
            <Breadcrumb.Item href="">
              <UserOutlined />
              <span>Application List</span>
            </Breadcrumb.Item>
            <Breadcrumb.Item>Application</Breadcrumb.Item>
          </Breadcrumb>
        </div>
      </div>
    )
  }
Example #3
Source File: index.js    From gobench with Apache License 2.0 6 votes vote down vote up 
render() {
    return (
      <div>
        <h5 className="mb-3">
          <strong>Icons Usage</strong>
        </h5>
        <div className="mb-5">
          <HomeOutlined className="mr-3 mb-3 font-size-24" />
          <SettingFilled className="mr-3 mb-3 font-size-24" />
          <SmileOutlined className="mr-3 mb-3 font-size-24" />
          <SyncOutlined spin className="mr-3 mb-3 font-size-24" />
          <SmileOutlined rotate={180} className="mr-3 mb-3 font-size-24" />
          <LoadingOutlined className="mr-3 mb-3 font-size-24" />
        </div>
      </div>
    )
  }
Example #4
Source File: withIcon.jsx    From virtuoso-design-system with MIT License 6 votes vote down vote up 
storiesOf('antd/breadcrumb', module).add('withIcon', () => 
  <Breadcrumb>
    <Breadcrumb.Item href="">
      <HomeOutlined />
    </Breadcrumb.Item>
    <Breadcrumb.Item href="">
      <UserOutlined />
      <span>Application List</span>
    </Breadcrumb.Item>
    <Breadcrumb.Item>Application</Breadcrumb.Item>
  </Breadcrumb>,
  { docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>The icon should be placed in front of the text.</p></>) } });
Example #5
Source File: basic.jsx    From virtuoso-design-system with MIT License 6 votes vote down vote up 
storiesOf('antd/Icon', module).add('basic', () => 
  <div className="icons-list">
    <HomeOutlined />
    <SettingFilled />
    <SmileOutlined />
    <SyncOutlined spin />
    <SmileOutlined rotate={180} />
    <LoadingOutlined />
  </div>,
  { docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>Import icons from <code>@ant-design/icons</code>, component name of icons with different theme is the icon name suffixed by the theme name. Specify the <code>spin</code> property to show spinning animation.</p></>) } });
Example #6
Source File: index.jsx    From mixbox with GNU General Public License v3.0 5 votes vote down vote up 
renderMenus() {
        const {dataSource} = this.props;

        if (dataSource && dataSource.length) {
            return renderNode(dataSource, (item, children) => {
                const {
                    key,
                    path,
                    text,
                    icon,
                    target,
                    url,
                } = item;

                let title = <span>{text}</span>;
                if (icon) title = <span><Icon type={icon}/><HomeOutlined style={{display: 'none'}} /><span>{text}</span></span>;

                if (children) {
                    return (
                        <SubMenu key={key} title={title}>
                            {children}
                        </SubMenu>
                    );
                }


                return (
                    <Menu.Item key={key}>
                        {target ? (
                            <a href={url} target={target}>
                                {title}
                            </a>
                        ) : (
                            <Link to={{
                                pathname: path,
                                state: {from: 'menu'}
                            }}>
                                {title}
                            </Link>
                        )}
                    </Menu.Item>
                );
            });
        }
        return null;
    }
Example #7
Source File: Nav.js    From network-rc with Apache License 2.0 5 votes vote down vote up 
export default function Nav(props) {
  return (
    <Space
      align="center"
      size="large"
      style={{ width: "100%", justifyContent: "center" }}
    >
      <a
        href="https://network-rc.esonwong.com"
        target="_blank"
        rel="noopener noreferrer"
      >
        <HomeOutlined /> Network RC
      </a>
      <a
        href="https://twitter.com/eson000"
        target="_blank"
        rel="noopener noreferrer"
      >
        <TwitterOutlined /> Twitter
      </a>
      <a
        href="https://space.bilibili.com/96740361"
        target="_blank"
        rel="noopener noreferrer"
      >
        <Icon type="icon-bilibili-fill" /> B站
      </a>
      <a
        href="https://www.youtube.com/channel/UCyQR6LHhhhpTFfxZo7VZddA"
        target="_blank"
        rel="noopener noreferrer"
      >
        <YoutubeOutlined /> Youtube
      </a>
      <a
        href="https://github.com/itiwll/network-rc"
        target="_blank"
        rel="noopener noreferrer"
      >
        <GithubOutlined /> Github
      </a>
      <a
        href="https://blog.esonwong.com/donate/"
        target="_blank"
        rel="noopener noreferrer"
      >
        <HeartOutlined /> 请我喝杯咖啡吧！
      </a>
    </Space>
  );
}
Example #8
Source File: AppRouter.jsx    From React-Nest-Admin with MIT License 4 votes vote down vote up 
sidebar = () => {
  return (
    <Menu theme="dark" mode="inline" defaultSelectedKeys={["1"]}>
      <Menu.Item key="1">
        <Link to={{ pathname: "/" }}>
          <HomeOutlined />
          <span>首页</span>
        </Link>
      </Menu.Item>
      <Menu.Item key="5">
        <Link to={{ pathname: "/user-management" }}>
          <UserOutlined />
          <span>用户管理</span>
        </Link>
      </Menu.Item>
      <SubMenu
        key="sub1"
        title={
          <span>
            <FileOutlined />
            <span>文件管理</span>
          </span>
        }
      >
        <Menu.Item key="sub1-1">
          <Link to={{ pathname: "/file/list" }}>
            <OrderedListOutlined />
            <span>文件列表</span>
          </Link>
        </Menu.Item>
        <Menu.Item key="sub1-2">
          <Link to={{ pathname: "/file/add" }}>
            <UploadOutlined />
            <span>文件上传</span>
          </Link>
        </Menu.Item>
      </SubMenu>
      <SubMenu
        key="sub2"
        title={
          <span>
            <DashboardOutlined />
            <span>可视化图表</span>
          </span>
        }
      >
        <Menu.Item key="sub2-1">
          <Link to={{ pathname: "/charts/line-chart" }}>
            <LineChartOutlined />
            <span>折线图</span>
          </Link>
        </Menu.Item>
        <Menu.Item key="sub2-2">
          <Link to={{ pathname: "/charts/bar-chart" }}>
            <BarChartOutlined />
            <span>柱状图</span>
          </Link>
        </Menu.Item>
        <Menu.Item key="sub2-3">
          <Link to={{ pathname: "/charts/pie-chart" }}>
            <PieChartOutlined />
            <span>饼状图</span>
          </Link>
        </Menu.Item>
      </SubMenu>

      <SubMenu
        key="sub5"
        title={
          <span>
            <FileExcelOutlined />
            <span>Excel表格</span>
          </span>
        }
      >
        <Menu.Item key="sub5-1">
          <Link to={{ pathname: "/excel/export-csv" }}>
            <ExportOutlined />
            <span>Export csv</span>
          </Link>
        </Menu.Item>
      </SubMenu>

      <SubMenu
        key="sub4"
        title={
          <span>
            <EditOutlined />
            <span>文本编辑器</span>
          </span>
        }
      >
        <Menu.Item key="sub4-1">
          <Link to={{ pathname: "/rich-text-editor" }}>
            <Html5Outlined />
            <span>富文本编辑器</span>
          </Link>
        </Menu.Item>
        <Menu.Item key="sub4-2">
          <Link to={{ pathname: "/md-editor" }}>
            <FileMarkdownOutlined />
            <span>Markdown编辑器</span>
          </Link>
        </Menu.Item>
      </SubMenu>

      <SubMenu
        key="sub3"
        title={
          <span>
            <BugOutlined />
            <span>错误页面</span>
          </span>
        }
      >
        <Menu.Item key="sub3-1">
          <Link to={{ pathname: "/not-found" }}>
            <InboxOutlined />
            <span>404</span>
          </Link>
        </Menu.Item>
        <Menu.Item key="sub3-2">
          <Link to={{ pathname: "/not-allow" }}>
            <StopOutlined />
            <span>403</span>
          </Link>
        </Menu.Item>
      </SubMenu>

      <Menu.Item key="6">
        <a
          href="https://github.com/cnscorpions/React-Nest-Admin"
          target="_blank"
          rel="noopener noreferrer"
        >
          <GithubOutlined />
          <span>Github</span>
        </a>
      </Menu.Item>
    </Menu>
  );
}