怎么用class引入svg_【蓝湖指北】走向设计巅峰，从蓝湖 Sketch 插件开始，用它！...

用好蓝湖，提升团队协作效率，蓝湖指北，教你如何用好蓝湖。本期【蓝湖指北】如约而至～
Sketch 作为一款轻量级的矢量设计工具，凭借其强大的界面设计功能，被大多数 UI 设计师所使用，日渐成为产品研发团队中不可或缺的一款重要生产工具。
这个工具有多重要呢，可以说：只要设计师不加班，整个团队都能早下班。

加班，是整个互联网行业会呼吸的痛，以提升产品设计协作效率为己任的蓝湖，为使用 Sketch 的设计师们出品了【蓝湖 Sketch 插件】。有人说，它为创意插上翅膀，有人说，它让设计效率原地起飞。
怎么用好【蓝湖 Sketch 插件】呢，且听湖湖为您分解：
设计图一键上传
支持多种界面
设计图树状连线
设计图自动标注
切图一键下载
蓝湖【设计规范云】
>
设计图一键上传，【项目/团队】要拎清
下载【蓝湖 Sketch 插件】，安装之后重启 Sketch，即可在 Sketch【Plugins】中通过【蓝湖】上传设计图。
下载地址：https://lanhuapp.com/mac（建议在 PC 端打开）
设计图上传之前需要选择设计图对应的团队和项目，这一步看似简单的操作，背后却是团队管理的学问。

Tips：
上传设计图之前请梳理好工作的内容，以【项目】区分，按不同内容创建不同项目。比如 Banner 设计、官网设计、活动物料设计等，不仅能高效管理自己的工作内容，也便于团队中的其它成员查看。
根据整个团队的工作流程，创建不同的团队和项目，以收录相关的设计图，及时更新，整个团队的工作进度一目了然。

支持多种界面，【当前设计】要看清
选择要上传的设计图，或者一键上传所有设计图；插件内 【当前设计】是指当前设计图的大小，根据设计图大小选择对应倍数。
确定当前设计基于的设备是 iOS、 Android 还是 Web，再确定现在的设计图是基于几倍设计的，最后选择和设计图匹配的设备和倍数。

Tips：
iPhone、iPad、iWatch 这三种设备的界面设计 属于 —— iOS；安卓系统的界面设计 属于 —— Android；网页类型的界面设计 属于 —— Web。
375 x 667， 属于 iOS 1x；750 x 1334，属于 iOS 2x；1920 x 1080, 手机建议选 Android-xxhdpi；网页选 Web-1x。
Web 类型：1x , 是常用尺寸，大家做的网页一般都是选 1x ；2x 是指为特定的屏幕（4k 屏）设计的尺寸，通常该尺寸会是正常网页的 2 倍。

设计图树状连线，【连线 L 】要标清
很多 UI 设计师的设计图做好之后，标注说明图片和产品的逻辑，需要耗费大量时间，每一次修改都意味着需要再次耗费同样的时间做图片说明。
用【蓝湖 Sketch 插件】将设计图上传之后，进入蓝湖的【设计】页，点击上方的【连线 L 】图标，进入设计图连线模式，可将设计图随意拖动摆放，绘制页面间跳转逻辑连线，轻松、直观展现产品逻辑。

自动标注，设计元素和代码时时更新
设计元素设计图通过【蓝湖 Sketch 插件】上传之后，即可在设计图详情页查看设计图每一个元素的颜色、大小、间距、字号等信息，团队内的成员可以随时查看，并可直接复制相关代码；
如果设计图有修改、更新，蓝湖也能自动添加最新版本。

切图一键下载，【切图类型】要搞清
通过【蓝湖 Sketch 插件】标记需要生成的切图，上传设计图后，在设计图详情页，工程师即可一键下载多倍数切图文件，支持 JPG、PNG、SVG、WebP 格式。
Step1：标记切图

以众多设计师推荐的【 B.切片类型切图】为例，选中需要标记为切图的图标，点击 Sketch 右下角的 【 Make Exportable 】，然后再点击 Sketch 右下角的【切刀】图标，即可标记切图。
或者使用快捷键【S】，鼠标会显示成切刀工具，此时鼠标右键需要标记为切图的图标，即可标记切图。

Step2：自定义切图尺寸
当设计图上的切图尺寸不合适的时候，可以自定义切图尺寸。
选中需要自定义尺寸的图标，在右上角的图标尺寸栏中，输入合适的尺寸，然后再将该图标的切图图层跟原始图层合并成一个分组，即可成功自定义切图。
Step3：切图导出 SVG 格式
插件右下角【切图导出 SVG 】，勾选后上传的切图会自动生成 SVG 格式。
需要被切图层是矢量图层, 如形状图层和文本图层，则不能输出 SVG 格式。
个别情况下有描边的矢量图标会导致导出错误，请把描边转为路径后上传。
如果不需要使用 SVG 资源的时候，建议关闭 SVG 导出。
Tip：
如果你标记的切图有背景图层，而此时你需要切图是透明背景，此时选中 Slice 层后，再在右侧菜单中勾选【 Export group contents> 】这个选项，即可得到是透明背景的切图。

蓝湖【设计规范云】，带你起飞
除了【蓝湖 Sketch 插件】 ，我们还针对 Sketch 推出了蓝湖【设计规范云】。
下载地址：https://lanhuapp.com/dsm（建议在 PC 端打开）
在蓝湖【设计规范云】添加颜色、文本样式、图层样式、图标、组件等元素之后，团队成员即可直接使用添加好的元素。

蓝湖还提供下载 Element、Ant-Design 组件库，无须上传，就能直接使用。

蓝湖【设计规范云】帮助互联网团队同步设计规范，保持设计一致性，提高设计效率。
设计师们做图有了参考、元素有了出处、稿件有了归属，大大提升设计效率，设计师不加班，团队早回家。

有人说设计是一门艺术，有人说设计是一门技术，湖湖认为，设计是用娴熟的技术成就艺术。
【蓝湖 Sketch 插件】➕蓝湖【设计规范云】，正努力成为设计师们那一对隐形的翅膀，带你飞过绝望、走出迷茫，天天都能一稿过！
​
用蓝湖，不加班~
蓝湖网址：http://LanhuApp.com
蓝湖，高效的产品设计协作平台