svg-inline-hook

1.0.3 • Public • Published

svg-inline-hook

为了通过css来定义svg的样式,必须使用inline svg.

在客户端,我们使用webpack对资源进行打包,在处理svg时,可以使用raw-loader来达到获取inline svg的效果(png等图片还是使用url-loader).

在服务器端,使用这个包来hack node的require方法,在require时,直接返回raw svg.

项目使用了React, 所以下面的样例也举了React的例子.

Installation

$ npm i --save svg-inline-hook

Usage

在server端的入口文件中:

require('asset-require-hook');

在import/require svg时: ES 6 Import:

import logoSvg from 'common/images/logo.svg';

require:

const logoSvg = require('common/images/logo.svg');

React Component

在React项目中,我们封装了一个组件:

import React, { PropTypes } from 'react';
 
const Svg = (props) => {
  const { markup, className, ...rest } = props;
  const isBase64 = typeof markup === 'string' && markup.indexOf('data') === 0;
 
  if (isBase64) {
    return <img src={markup} className={className} {...rest} role="presentation" />
  }
 
  const content = require(`../../images/${markup}.svg`);
 
  return <span dangerouslySetInnerHTML={{ __html: content }} className={className} {...rest} />;
};
 
Svg.propTypes = {
  markup: PropTypes.string.isRequired,
};
 
export default Svg;
 

在其他地方使用的时候:

import Svg from 'widgets/Svg';
...
<Svg markup="logo" className="logo" />

Package Sidebar

Install

npm i svg-inline-hook

Weekly Downloads

2

Version

1.0.3

License

MIT

Last publish

Collaborators

  • pishilong