Thêm icon cho framework7 reactjs

Đầu tiên các bạn vào github của page setup icon tại đây
Download project về.Giải nén và copy folder css và folder fonts vào folder src
Sau đó mở file index.js và thêm vào import ‘./css/framework7-icons.css’; ở dưới dòng import ‘framework7/css/framework7.bundle.css’;

import React from 'react';
import ReactDOM from 'react-dom';


import * as serviceWorker from './serviceWorker';
// Import F7 Bundle
import Framework7 from 'framework7/framework7.esm.bundle';

// Import F7-React Plugin
import Framework7React from 'framework7-react';

// Framework7 styles
import 'framework7/css/framework7.bundle.css';
import './index.css';
import './css/framework7-icons.css';
import App from './App';
// Init F7-React Plugin
Framework7.use(Framework7React);

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

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

Setup framework7-icons

npm install framework7-icons

Xong phần setup.
Thêm icon:

<Icon f7="house" size="44px" color="blue"></Icon>

Các bạn nhớ import Icon vào nhé.

import { Page, Navbar, Link, Block,Icon } from 'framework7-react';

Page chọn icon https://framework7.io/icons/
Vậy là xong.Các bạn đọc thêm document ở đây.

0 Shares

Leave a Reply

avatar
  Subscribe  
Notify of