克隆并运行yarn && yarn start:dev
提交PR（我可以随后构建并部署它）
请注意，由于我尚未映射index.html或/src任何图像，因此我已经提交了/dist目录，因此它们现在位于/dist ，因此现在位于源代码控制中。
使用https开发
为了使PWA在开发中正常工作，必须在安全的上下文中为站点提供服务。 要在安全的上下文中运行该应用程序，请执行以下操作：
安装并按照说明安装本地证书颁发机构。
运行yarn gen:cert
yarn dev:https
:dollar_banknote:
平常我们从阿里矢量图或者其他矢量图下载下来的图标放到ps以后，都会自动栅格化或者生成智能对象，
但是这并不是我们想要的，我们明明下载的矢量图，为啥就变成智能对象或者栅格化了呢？因为ps不支持处理矢量图。
当我们吧这种非矢量的图标上传到蓝湖后然后选择下载
svg
格式的图标你会发现这个图标是
空白
的。前端程序员根本无法使用。
打开下载下来的
svg
图片
显示一篇
空白
，这种
图片
是无法使用的。
当然你用sketch上传就没那么多麻烦了，但是不是每个人人手一台macbook嘛
SVG
：android5.0+出现，w3c推出
使用xml 描述二维图形语言,矢量图,放大缩小无影响
为什么用
svg
,现在手机的短板是内存,不是cpu,
svg
通过cpu计算，png占用内存
Android上对
svg
进行阉割，使用Vector Drawable对
svg
支持，
svg
小
2.
svg
语法：
Vector 语法简介，如何看懂一张
svg
(1)Path指令解析如下所示：
M = moveto(M X,Y) ：将画笔移动到指定的坐标位置，相当于 android Path 里的moveTo()
造成这个问题的原因，可能是因为sketch、dx等软件在导出
svg
时，自动在
svg
上添加了一些iconfont平台无法解析的属性造成的。所以解决这个问题，要么从
svg
代码入手，要么就需要借助工具来完成。
改代码并不是很理想的解决方式，这里我们借助iconfont官方平台推荐的图形设计软件AI来解决这个问题。
1、首先下载一个AI软件
2、然后使用AI打开通过其他设计软件导出的
svg
图标
3、选中整个图标，然后选择对象—扩展—选择描边（已经选择取消，重新选择）——确定
4、保存为
svg
svg
配置
Java可以使用第三方库Apache Batik来操作
SVG
图片
。可以使用Batik来解析
SVG
文件、创建和修改
SVG
文件、渲染
SVG
文件并将其转换为其他格式的图像文件。以下是使用Batik库来读取和修改
SVG
文件的示例代码：
```java
import org.apache.batik.anim.dom.SAX
SVG
DocumentFactory;
import org.apache.batik.anim.dom.
SVG
OM
SVG
Element;
import org.apache.batik.bridge.DocumentLoader;
import org.apache.batik.bridge.GVTBuilder;
import org.apache.batik.gvt.GraphicsNode;
import org.apache.batik.util.XMLResourceDescriptor;
import org.w3c.dom.Document;
import java.io.File;
import java.io.IOException;
public class
SVG
ManipulationExample {
public static void main(String[] args) throws IOException {
// Load the
SVG
file
String parser = XMLResourceDescriptor.getXMLParserClassName();
SAX
SVG
DocumentFactory factory = new SAX
SVG
DocumentFactory(parser);
File
svg
File = new File("path/to/
svg
/file.
svg
");
Document
svg
Doc = factory.createDocument(
svg
File.toURI().toString());
// Get the
SVG
element
SVG
OM
SVG
Element
svg
Root = (
SVG
OM
SVG
Element)
svg
Doc.getDocumentElement();
// Modify the
SVG
element (change the fill color of all paths)
String newFillColor = "#FF0000";
for (int i = 0; i <
svg
Root.getChildNodes().getLength(); i++) {
if (
svg
Root.getChildNodes().item(i) instanceof org.apache.batik.dom.
svg
.
SVG
OMPathElement) {
org.apache.batik.dom.
svg
.
SVG
OMPathElement path = (org.apache.batik.dom.
svg
.
SVG
OMPathElement)
svg
Root.getChildNodes().item(i);
path.setAttribute("fill", newFillColor);
// Render the modified
SVG
file to a PNG file
int width = 500;
int height = 500;
BufferedImage output = new BufferedImage(width, height, BufferedImage.TYPE_INT_ARGB);
Graphics2D g2d = output.createGraphics();
GVTBuilder builder = new GVTBuilder();
DocumentLoader loader = new DocumentLoader();
BridgeContext ctx = new BridgeContext(new UserAgentAdapter());
ctx.setDynamicState(BridgeContext.DYNAMIC);
GraphicsNode rootGN = builder.build(ctx,
svg
Root);
rootGN.paint(g2d);
ImageIO.write(output, "png", new File("path/to/output/file.png"));
