网页中引用svg图片的一种方式

我们前端用的框架是ant design，ant design本身有提供svg图片引进方式，但是需要一些配置，详情看ant design中的Icon目录

这里记录的只适合少量图片，大量图片还是乖乖配置搭建框架吧

首先这里有一张svg形式的图片

在开发工具中将这张图片引入，修改文件名，后缀修改为.ts，这里修改为message.ts

打开文件内容全选复制，并将该文件内容修改为 export default '复制的内容';

如下：

export default '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1560849594976" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2132" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M325.40444445 726.35733333c24.68977778 4.096 81.00977778 8.41955555 107.06488888 8.41955556 228.57955555 0 381.952-170.09777778 381.952-370.00533334 0-200.02133333-191.71555555-362.15466667-381.952-362.15466666C203.66222222 2.61688889 18.65955555 164.75022222 18.65955555 364.77155555c0 115.82577778 44.14577778 214.24355555 127.31733334 285.01333334v180.56533333L325.40444445 726.35733333z m280.91733333-404.70755555c26.16888889 0 47.33155555 21.16266667 47.33155555 47.33155555s-21.16266667 47.33155555-47.33155555 47.33155556-47.33155555-21.16266667-47.33155556-47.33155556 21.16266667-47.33155555 47.33155556-47.33155555z m-191.37422223 0c26.16888889 0 47.33155555 21.16266667 47.33155556 47.33155555s-21.16266667 47.33155555-47.33155556 47.33155556-47.33155555-21.16266667-47.33155555-47.33155556c0-12.51555555 5.00622222-24.576 13.88088889-33.45066666 8.87466667-8.87466667 20.93511111-13.88088889 33.45066666-13.88088889z m-189.66755555 0c26.16888889 0 47.33155555 21.16266667 47.33155555 47.33155555S251.44888889 416.31288889 225.28 416.31288889s-47.33155555-21.16266667-47.33155555-47.33155556c0.11377778-26.16888889 21.27644445-47.33155555 47.33155555-47.33155555z m0 0" p-id="2133"></path><path d="M876.43022222 293.43288889l1.59288889 27.42044444c0.22755555 26.05511111 0 23.66577778 0 47.78666667 0 253.83822222-200.02133333 429.73866667-477.52533333 429.73866667h-95.45955556c75.776 74.06933333 163.95377778 119.35288889 286.49244445 119.35288888 25.48622222-0.11377778 51.08622222-2.16177778 76.23111111-6.37155555l178.40355555 109.90933333V840.704c96.71111111-66.21866667 159.17511111-169.07377778 159.17511112-285.01333333 0-103.31022222-49.60711111-196.26666667-128.91022223-262.25777778z m0 0" p-id="2134"></path></svg>';

在需要引入图片的文件

import MessageSvg from './Icon/message';


<i dangerouslySetInnerHTML={{ __html: MessageSvg }} className='svg-style'/>

样式更改

.svg-style {
    svg {
        width : 23px;
        height: 21px;
        fill  : rgba(33,33,33,1);
     }
}

over!