关于svg

HTML页面常用加载svg图片方式：

HTML元素

// data 和 type 至少指定一项

<object data = './public/icon.svg' width='20' height='20' name='svg' type='image/svg+xml' usemap="#nameOfMap" ></object>

HTML元素(不推荐)
iframe

    <iframe src="./location-1.svg" frameborder="0" style="background-color: #666;"></iframe>

HTML元素
CSS[background-image]属性

react-svg

在react项目中使用svg,建议使用react-svg.

react-svg即一个封装后的React组件。它的目的在于利用SVGinjector把SVG添加到DOM中。

import React from 'react';

import ReactDOM from 'react-dom';

import ReactSVG from 'react-svg';

ReactDOM.render(

  <ReactSVG

    path="atomic.svg"

    callback={svg => console.log(svg)}

    className="class-name"

    wrapperClassName="wrapper-class-name"

  />,

  document.querySelector('.Root')

);

在实际开发中，使用上面的方法插入svg同样繁琐。利用react-svg-loader插件可以简化上述过程：

// 不使用webpack

import Image1 from 'react-svg-loader!./image1.svg';

// 使用webpack配置了react-svg-loader

import Image2 from './image1.svg';

// 像普通react组件那样使用它， react-svg-loader会在自动将它替换为DOM

<Image1 width={50} height={50}/>

<Image2 width={50} height={50}/>

webpack中设置：

{

    test: /\.svg$/,

    use: [

        {loader: 'babel-loader'}

        {

         loader: 'react-svg-loader'

        }

    ]

}

react-svg-loader内部流程

输入svg -> 使用SVGO进行SVG优化 -> 编译转换

因此webpack中可以配置SVGO参数

{

    test: /\.svg$/,

    use: [

        {loader: 'babel-loader'}

        {

         loader: 'react-svg-loader',

         options:{

             svgo: [

                {

                    removeTitle: false

                }

             ]

         }

        }

    ]

}

巴特西

【HTML5-基础-SVG实践】

关于svg

HTML页面常用加载svg图片方式：

react-svg

其他

最新文章

热门文章