React 简书项目实战【2】icon优化header

React 简书项目实战【2】icon优化header

下载icon

登录www.iconfont.cn

下载3个icon

导入

在statics文件夹下创建一个iconfont文件夹

将文件导入

配置

将iconfont.css改为iconfont.js

将样式注册到全局

import { createGlobalStyle } from 'styled-components'
export const Globalstyle2 = createGlobalStyle`
@font-face {
  font-family: "iconfont"; /* Project id 3487186 */
  src: url('./iconfont.woff2?t=1656320768780') format('woff2'),
       url('./iconfont.woff?t=1656320768780') format('woff'),
       url('./iconfont.ttf?t=1656320768780') format('truetype');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-yongyan:before {
  content: "\e600";
}

.icon-sousuo:before {
  content: "\e62f";
}

.icon-Aa:before {
  content: "\e636";
}
`;

在index.js引入文件

import React from 'react';
import ReactDOM from 'react-dom';
import './style.js';
import App from './App';
import './statics/iconfont/iconfont.js'

ReactDOM.render(<App />,document.getElementById('root'));

App.js

import React, { Fragment,Component } from "react";
import Header from "./common/header";
import {Globalstyle2} from "./statics/iconfont/iconfont";
import {Globalstyle} from "./style";
class App extends Component{
    render() {
      return (
          <Fragment>
            <Globalstyle/>
            <Globalstyle2 />
            <Header />
          </Fragment>
      );
    }
}
export default App;

应用

header下的index.js

import React, { Component } from "react";
import {SearchWrapper,HeaderWrapper,Logo,Nav,NavItem,NavSearch,Addition,Button} from "./style";
class Header extends Component {
    render() {
        return (
            <HeaderWrapper>
                <Logo />
                <Nav>
                    <NavItem className='left active'>首页</NavItem>
                    <NavItem className='left'>下载App</NavItem>
                    <NavItem className='right'>登录</NavItem>
                    <NavItem className='right'>
                        <i className="iconfont ">&#xe636;</i>
                    </NavItem>
                    <SearchWrapper>
                      <NavSearch></NavSearch>
                      <i className="iconfont ">&#xe62f;</i>
                    </SearchWrapper>
                </Nav>
                <Addition>
                    <Button className='writting'>
                        <i className="iconfont ">&#xe600;</i>
                        写文章</Button>
                    <Button className='reg'>注册</Button>
                </Addition>
            </HeaderWrapper>
        )
    }
}

export default Header;

header下的style.js

import styled from 'styled-components';
import logoPic from '../../statics/logo.png'
export const HeaderWrapper = styled.div`
    position: relative;
    height: 58px;
    border-bottom: 1px solid #f0f0f0;
`;
export const Logo = styled.a.attrs({href:'/'})`
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100px;
    height: 56px;
    background: url(${logoPic});
    background-size: contain;
`;
export const Nav = styled.div`
    width: 960px;
    height: 100%;
    padding-right: 70px;
    box-sizing: border-box;
    margin: 0 auto;
`;
export const NavItem = styled.div`
    line-height: 56px;
    padding: 0 15px;
    font-size: 17px;
    color: #333;
    &.left {
        float: left;
    }
    &.right {
        float: right;
        color: #969696;
    }
    &.active {
        color: #ea6f5a;
    }
`;
export const SearchWrapper = styled.div`
    position: relative;
    float: left;
    .iconfont {
        position: absolute;
        right: 5px;
        bottom: 5px;
        width: 30px;
        line-height: 30px;
        border-radius: 15px;
        text-align: center;
    }
`;
export const NavSearch = styled.input.attrs({
    placeholder: '搜索'
})`
    width: 160px;
    height: 38px;
    padding: 0 20px;
    margin-top: 9px;
    margin-left: 20px;
    box-sizing: border-box;
    border: none;
    outline: none;
    border-radius: 19px;
    background: #eee;
    font-size: 14px;,
    &::placeholder {
        color: #999;
    }
`;

export const Addition = styled.div`
    position: absolute;
    right: 0;
    top: 0;
    height: 56px;
`;

export const Button = styled.div`
    float: right;
    margin-top: 9px;
    margin-right: 20px;
    padding: 0 20px;
    line-height: 38px;
    border-radius: 19px;
    border: 1px solid #ec6149;
    font-size: 14px;
    &.reg {
        color: #ec6149;
    }
    &.writting {
        color: #fff;
        background: #ec6149;
    }
`;

注意：使用火狐浏览器可能存在不显示icon情况