项目作者: theuves

项目描述 :
Import fonts from Google Fonts with styled-components.
高级语言: JavaScript
项目地址: git://github.com/theuves/import-google-fonts.git
创建时间: 2019-01-06T21:53:56Z
项目社区:https://github.com/theuves/import-google-fonts

开源协议:MIT License

下载


import-google-fonts

Import fonts from Google Fonts with styled-components.

Installation

You can install it with npm or yarn.

Try:

  • npm install import-google-fonts
  • yarn add import-google-fonts

Usage

See a simple example:

  1. import React, { Fragment } from 'react'
  2. import ReactDOM from 'react-dom'
  3. import styled, { createGlobalStyle } from 'styled-components'
  4. import importGoogleFonts from 'import-google-fonts'
  5. const GoogleFonts = importGoogleFonts(createGlobalStyle, null, [
  6. 'Pacifico'
  7. ])
  8. const MyText = styled.h1`
  9. font-family: 'Pacifico', cursive;
  10. `
  11. const App = () => (
  12. <Fragment>
  13. <GoogleFonts ></GoogleFonts>
  14. <MyText>
  15. Hello, World!
  16. </MyText>
  17. </Fragment>
  18. )
  19. ReactDOM.render(
  20. <App ></App>,
  21. document.getElementById('root')
  22. )

Syntax

  1. importGoogleFonts(inject, protocol, fonts)

When:

  • inject - The createGlobalStyle function in v4 and above or injectGlobal in v3 and bellow.
  • protocol - Can be 'http' or 'https'. The default value is 'https'.
  • fonts - An array with the fonts you want to import.

NOTE: In styled-components v3 and below you don’t need to create a component.

License

MIT © Matheus Alves