From 6ce97dae734cf0ac4a65437407601ea6174721ef Mon Sep 17 00:00:00 2001
From: "zude.hzd" <zude.hzd@alibaba-inc.com>
Date: Fri, 23 Oct 2020 15:46:48 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20style=20=E8=BF=81=E7=A7=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |   2 +-
 packages/demo/public/assets.json              |   7 +
 packages/demo/public/index.html               |   1 +
 packages/demo/src/editor/config.ts            |   4 +-
 packages/editor-setters/package.json          |  23 +-
 .../editor-setters/src/style-setter/index.tsx |   2 +-
 .../lc-style-setter/background/attachment.js  |  42 ++
 .../lc-style-setter/background/color.js       |  42 ++
 .../lc-style-setter/background/image.js       |  56 ++
 .../lc-style-setter/background/index.js       | 117 ++++
 .../lc-style-setter/background/parser.js      | 245 +++++++
 .../lc-style-setter/background/position.js    | 292 ++++++++
 .../lc-style-setter/background/repeat.js      |  47 ++
 .../lc-style-setter/background/size.js        | 174 +++++
 .../lc-style-setter/border/border.js          | 186 +++++
 .../lc-style-setter/border/borderParser.js    | 141 ++++
 .../lc-style-setter/border/index.js           |  33 +
 .../lc-style-setter/border/radius.js          | 141 ++++
 .../lc-style-setter/border/radiusParser.js    |  54 ++
 .../lc-style-setter/effects/cursor.js         |  46 ++
 .../lc-style-setter/effects/index.js          |  67 ++
 .../lc-style-setter/effects/opacity.js        |  47 ++
 .../lc-style-setter/effects/shadow.js         | 210 ++++++
 .../lc-style-setter/i18n/index.js             |  45 ++
 .../lc-style-setter/i18n/strings/en-US.json   |  72 ++
 .../lc-style-setter/i18n/strings/index.js     |   4 +
 .../lc-style-setter/i18n/strings/zh-CN.json   |  72 ++
 .../src/style-setter/lc-style-setter/index.js | 117 ++++
 .../lc-style-setter/layout/display.js         |  44 ++
 .../lc-style-setter/layout/flex.js            | 176 +++++
 .../lc-style-setter/layout/flexitem.js        |  10 +
 .../lc-style-setter/layout/height.js          |  19 +
 .../lc-style-setter/layout/index.js           | 107 +++
 .../lc-style-setter/layout/padding+margin.js  | 504 ++++++++++++++
 .../lc-style-setter/layout/position.js        |  10 +
 .../lc-style-setter/layout/size.js            |  82 +++
 .../lc-style-setter/layout/width.js           |  20 +
 .../style-setter/lc-style-setter/style.less   | 633 ++++++++++++++++++
 .../style-setter/lc-style-setter/svg/fill.js  |   0
 .../style-setter/lc-style-setter/svg/index.js |  10 +
 .../svglib/align-baseline-v.js                |  14 +
 .../lc-style-setter/svglib/align-baseline.js  |  14 +
 .../lc-style-setter/svglib/align-center-v.js  |  14 +
 .../lc-style-setter/svglib/align-center.js    |  14 +
 .../lc-style-setter/svglib/align-end-v.js     |  14 +
 .../lc-style-setter/svglib/align-end.js       |  14 +
 .../lc-style-setter/svglib/align-start-v.js   |  14 +
 .../lc-style-setter/svglib/align-start.js     |  14 +
 .../lc-style-setter/svglib/align-stretch-v.js |  14 +
 .../lc-style-setter/svglib/align-stretch.js   |  14 +
 .../lc-style-setter/svglib/auto.js            |  17 +
 .../lc-style-setter/svglib/block.js           |  16 +
 .../lc-style-setter/svglib/blur.js            |  14 +
 .../lc-style-setter/svglib/border-all.js      |  23 +
 .../lc-style-setter/svglib/border-bottom.js   |  24 +
 .../lc-style-setter/svglib/border-left.js     |  24 +
 .../lc-style-setter/svglib/border-right.js    |  24 +
 .../lc-style-setter/svglib/border-top.js      |  23 +
 .../lc-style-setter/svglib/capitalize.js      |  14 +
 .../lc-style-setter/svglib/center.js          |  14 +
 .../lc-style-setter/svglib/color.js           |  15 +
 .../lc-style-setter/svglib/contain.js         |  17 +
 .../lc-style-setter/svglib/cover.js           |  17 +
 .../lc-style-setter/svglib/cursor-default.js  |  14 +
 .../lc-style-setter/svglib/cursor-pointer.js  |  15 +
 .../lc-style-setter/svglib/cursor.js          |  15 +
 .../lc-style-setter/svglib/dir.js             |  14 +
 .../svglib/direction-column.js                |  14 +
 .../lc-style-setter/svglib/direction-row.js   |  14 +
 .../lc-style-setter/svglib/fill.js            |  14 +
 .../lc-style-setter/svglib/fixed.js           |  14 +
 .../lc-style-setter/svglib/flex.js            |  14 +
 .../lc-style-setter/svglib/font-family.js     |  14 +
 .../lc-style-setter/svglib/font-size.js       |  14 +
 .../lc-style-setter/svglib/font-style.js      |  14 +
 .../lc-style-setter/svglib/font-weight.js     |  16 +
 .../lc-style-setter/svglib/handle.js          |  14 +
 .../lc-style-setter/svglib/height.js          |  15 +
 .../lc-style-setter/svglib/image.js           |  15 +
 .../lc-style-setter/svglib/index.js           |  90 +++
 .../lc-style-setter/svglib/inline-block.js    |  16 +
 .../lc-style-setter/svglib/inline.js          |  14 +
 .../lc-style-setter/svglib/italic.js          |  14 +
 .../svglib/justify-around-v.js                |  14 +
 .../lc-style-setter/svglib/justify-around.js  |  14 +
 .../svglib/justify-between-v.js               |  14 +
 .../lc-style-setter/svglib/justify-between.js |  14 +
 .../svglib/justify-center-v.js                |  14 +
 .../lc-style-setter/svglib/justify-center.js  |  14 +
 .../lc-style-setter/svglib/justify-end-v.js   |  14 +
 .../lc-style-setter/svglib/justify-end.js     |  14 +
 .../lc-style-setter/svglib/justify-start-v.js |  14 +
 .../lc-style-setter/svglib/justify-start.js   |  14 +
 .../lc-style-setter/svglib/layer.js           |  14 +
 .../lc-style-setter/svglib/letter-spacing.js  |  15 +
 .../lc-style-setter/svglib/line-height.js     |  14 +
 .../lc-style-setter/svglib/line-through.js    |  14 +
 .../lc-style-setter/svglib/lowercase.js       |  14 +
 .../style-setter/lc-style-setter/svglib/no.js |  14 +
 .../lc-style-setter/svglib/none.js            |  15 +
 .../lc-style-setter/svglib/normal.js          |  14 +
 .../lc-style-setter/svglib/offset.js          |  14 +
 .../lc-style-setter/svglib/opacity.js         |  15 +
 .../lc-style-setter/svglib/repeat-a.js        |  14 +
 .../lc-style-setter/svglib/repeat-x.js        |  14 +
 .../lc-style-setter/svglib/repeat-y.js        |  14 +
 .../lc-style-setter/svglib/repeat.js          |  14 +
 .../svglib/text-align-center.js               |  14 +
 .../svglib/text-align-justify.js              |  14 +
 .../lc-style-setter/svglib/text-align-left.js |  14 +
 .../lc-style-setter/svglib/text-align.js      |  14 +
 .../lc-style-setter/svglib/text-decoration.js |  15 +
 .../lc-style-setter/svglib/text-indent.js     |  14 +
 .../lc-style-setter/svglib/text-transform.js  |  14 +
 .../lc-style-setter/svglib/underline.js       |  14 +
 .../lc-style-setter/svglib/uppercase.js       |  14 +
 .../lc-style-setter/svglib/wrap-around-v.js   |  14 +
 .../lc-style-setter/svglib/wrap-around.js     |  14 +
 .../lc-style-setter/svglib/wrap-between-v.js  |  14 +
 .../lc-style-setter/svglib/wrap-between.js    |  14 +
 .../lc-style-setter/svglib/wrap-center-v.js   |  14 +
 .../lc-style-setter/svglib/wrap-center.js     |  14 +
 .../lc-style-setter/svglib/wrap-end-v.js      |  14 +
 .../lc-style-setter/svglib/wrap-end.js        |  14 +
 .../lc-style-setter/svglib/wrap-start-v.js    |  14 +
 .../lc-style-setter/svglib/wrap-start.js      |  14 +
 .../lc-style-setter/svglib/wrap-stretch-v.js  |  14 +
 .../lc-style-setter/svglib/wrap-stretch.js    |  14 +
 .../lc-style-setter/svglib/yes.js             |  14 +
 .../lc-style-setter/svgs/align-baseline-v.svg |   1 +
 .../lc-style-setter/svgs/align-baseline.svg   |   1 +
 .../lc-style-setter/svgs/align-center-v.svg   |   1 +
 .../lc-style-setter/svgs/align-center.svg     |   1 +
 .../lc-style-setter/svgs/align-end-v.svg      |   1 +
 .../lc-style-setter/svgs/align-end.svg        |   1 +
 .../lc-style-setter/svgs/align-start-v.svg    |   1 +
 .../lc-style-setter/svgs/align-start.svg      |   1 +
 .../lc-style-setter/svgs/align-stretch-v.svg  |   1 +
 .../lc-style-setter/svgs/align-stretch.svg    |   1 +
 .../lc-style-setter/svgs/auto.svg             |   6 +
 .../lc-style-setter/svgs/block.svg            |   5 +
 .../lc-style-setter/svgs/blur.svg             |   1 +
 .../lc-style-setter/svgs/border-all.svg       |  12 +
 .../lc-style-setter/svgs/border-bottom.svg    |  13 +
 .../lc-style-setter/svgs/border-left.svg      |  13 +
 .../lc-style-setter/svgs/border-right.svg     |  13 +
 .../lc-style-setter/svgs/border-top.svg       |  12 +
 .../lc-style-setter/svgs/capitalize.svg       |   3 +
 .../lc-style-setter/svgs/center.svg           |   3 +
 .../lc-style-setter/svgs/color.svg            |   4 +
 .../lc-style-setter/svgs/contain.svg          |   6 +
 .../lc-style-setter/svgs/cover.svg            |   6 +
 .../lc-style-setter/svgs/cursor-default.svg   |   3 +
 .../lc-style-setter/svgs/cursor-pointer.svg   |   4 +
 .../lc-style-setter/svgs/cursor.svg           |   3 +
 .../style-setter/lc-style-setter/svgs/dir.svg |   3 +
 .../lc-style-setter/svgs/direction-column.svg |   1 +
 .../lc-style-setter/svgs/direction-row.svg    |   1 +
 .../lc-style-setter/svgs/fill.svg             |   3 +
 .../lc-style-setter/svgs/fixed.svg            |   1 +
 .../lc-style-setter/svgs/flex.svg             |   1 +
 .../lc-style-setter/svgs/font-family.svg      |   3 +
 .../lc-style-setter/svgs/font-size.svg        |   4 +
 .../lc-style-setter/svgs/font-style.svg       |   3 +
 .../lc-style-setter/svgs/font-weight.svg      |   5 +
 .../lc-style-setter/svgs/handle.svg           |   1 +
 .../lc-style-setter/svgs/height.svg           |   4 +
 .../lc-style-setter/svgs/image.svg            |   4 +
 .../lc-style-setter/svgs/inline-block.svg     |   5 +
 .../lc-style-setter/svgs/inline.svg           |   1 +
 .../lc-style-setter/svgs/italic.svg           |   3 +
 .../lc-style-setter/svgs/justify-around-v.svg |   1 +
 .../lc-style-setter/svgs/justify-around.svg   |   1 +
 .../svgs/justify-between-v.svg                |   1 +
 .../lc-style-setter/svgs/justify-between.svg  |   1 +
 .../lc-style-setter/svgs/justify-center-v.svg |   1 +
 .../lc-style-setter/svgs/justify-center.svg   |   1 +
 .../lc-style-setter/svgs/justify-end-v.svg    |   1 +
 .../lc-style-setter/svgs/justify-end.svg      |   1 +
 .../lc-style-setter/svgs/justify-start-v.svg  |   1 +
 .../lc-style-setter/svgs/justify-start.svg    |   1 +
 .../lc-style-setter/svgs/layer.svg            |   3 +
 .../lc-style-setter/svgs/letter-spacing.svg   |   4 +
 .../lc-style-setter/svgs/line-height.svg      |   3 +
 .../lc-style-setter/svgs/line-through.svg     |   3 +
 .../lc-style-setter/svgs/lowercase.svg        |   3 +
 .../style-setter/lc-style-setter/svgs/no.svg  |   3 +
 .../lc-style-setter/svgs/none.svg             |   4 +
 .../lc-style-setter/svgs/normal.svg           |   3 +
 .../lc-style-setter/svgs/offset.svg           |   3 +
 .../lc-style-setter/svgs/opacity.svg          |   4 +
 .../lc-style-setter/svgs/repeat-a.svg         |   3 +
 .../lc-style-setter/svgs/repeat-x.svg         |   3 +
 .../lc-style-setter/svgs/repeat-y.svg         |   3 +
 .../lc-style-setter/svgs/repeat.svg           |   3 +
 .../svgs/text-align-center.svg                |   3 +
 .../svgs/text-align-justify.svg               |   3 +
 .../lc-style-setter/svgs/text-align-left.svg  |   4 +
 .../lc-style-setter/svgs/text-align.svg       |   3 +
 .../lc-style-setter/svgs/text-decoration.svg  |   4 +
 .../lc-style-setter/svgs/text-indent.svg      |   3 +
 .../lc-style-setter/svgs/text-transform.svg   |   3 +
 .../lc-style-setter/svgs/underline.svg        |   3 +
 .../lc-style-setter/svgs/uppercase.svg        |   3 +
 .../lc-style-setter/svgs/wrap-around-v.svg    |   1 +
 .../lc-style-setter/svgs/wrap-around.svg      |   1 +
 .../lc-style-setter/svgs/wrap-between-v.svg   |   1 +
 .../lc-style-setter/svgs/wrap-between.svg     |   1 +
 .../lc-style-setter/svgs/wrap-center-v.svg    |   1 +
 .../lc-style-setter/svgs/wrap-center.svg      |   1 +
 .../lc-style-setter/svgs/wrap-end-v.svg       |   1 +
 .../lc-style-setter/svgs/wrap-end.svg         |   1 +
 .../lc-style-setter/svgs/wrap-start-v.svg     |   1 +
 .../lc-style-setter/svgs/wrap-start.svg       |   1 +
 .../lc-style-setter/svgs/wrap-stretch-v.svg   |   1 +
 .../lc-style-setter/svgs/wrap-stretch.svg     |   1 +
 .../style-setter/lc-style-setter/svgs/yes.svg |   3 +
 .../lc-style-setter/typography/color.js       |  42 ++
 .../lc-style-setter/typography/family.js      | 159 +++++
 .../lc-style-setter/typography/index.js       | 143 ++++
 .../lc-style-setter/typography/lineheight.js  |  58 ++
 .../lc-style-setter/typography/size.js        |  75 +++
 .../lc-style-setter/typography/style.js       |  49 ++
 .../lc-style-setter/typography/textalign.js   |  57 ++
 .../typography/textdecoration.js              |  54 ++
 .../lc-style-setter/typography/weight.js      |  88 +++
 .../src/style-setter/lc-style-setter/utils.js | 280 ++++++++
 packages/plugin-source-editor/package.json    |   2 +-
 packages/plugin-source-editor/src/index.scss  |  37 +-
 packages/plugin-source-editor/src/index.tsx   |  58 +-
 .../plugin-source-editor/src/transform.ts     |   5 +-
 packages/react-renderer/package.json          |   2 +-
 232 files changed, 6639 insertions(+), 27 deletions(-)
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/background/attachment.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/background/color.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/background/image.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/background/index.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/background/parser.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/background/position.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/background/repeat.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/background/size.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/border/border.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/border/borderParser.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/border/index.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/border/radius.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/border/radiusParser.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/effects/cursor.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/effects/index.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/effects/opacity.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/effects/shadow.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/i18n/index.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/i18n/strings/en-US.json
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/i18n/strings/index.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/i18n/strings/zh-CN.json
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/index.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/layout/display.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/layout/flex.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/layout/flexitem.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/layout/height.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/layout/index.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/layout/padding+margin.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/layout/position.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/layout/size.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/layout/width.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/style.less
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svg/fill.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svg/index.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svglib/align-baseline-v.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svglib/align-baseline.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svglib/align-center-v.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svglib/align-center.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svglib/align-end-v.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svglib/align-end.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svglib/align-start-v.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svglib/align-start.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svglib/align-stretch-v.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svglib/align-stretch.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svglib/auto.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svglib/block.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svglib/blur.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svglib/border-all.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svglib/border-bottom.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svglib/border-left.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svglib/border-right.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svglib/border-top.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svglib/capitalize.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svglib/center.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svglib/color.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svglib/contain.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svglib/cover.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svglib/cursor-default.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svglib/cursor-pointer.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svglib/cursor.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svglib/dir.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svglib/direction-column.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svglib/direction-row.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svglib/fill.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svglib/fixed.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svglib/flex.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svglib/font-family.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svglib/font-size.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svglib/font-style.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svglib/font-weight.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svglib/handle.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svglib/height.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svglib/image.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svglib/index.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svglib/inline-block.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svglib/inline.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svglib/italic.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svglib/justify-around-v.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svglib/justify-around.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svglib/justify-between-v.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svglib/justify-between.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svglib/justify-center-v.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svglib/justify-center.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svglib/justify-end-v.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svglib/justify-end.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svglib/justify-start-v.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svglib/justify-start.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svglib/layer.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svglib/letter-spacing.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svglib/line-height.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svglib/line-through.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svglib/lowercase.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svglib/no.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svglib/none.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svglib/normal.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svglib/offset.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svglib/opacity.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svglib/repeat-a.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svglib/repeat-x.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svglib/repeat-y.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svglib/repeat.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svglib/text-align-center.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svglib/text-align-justify.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svglib/text-align-left.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svglib/text-align.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svglib/text-decoration.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svglib/text-indent.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svglib/text-transform.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svglib/underline.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svglib/uppercase.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svglib/wrap-around-v.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svglib/wrap-around.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svglib/wrap-between-v.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svglib/wrap-between.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svglib/wrap-center-v.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svglib/wrap-center.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svglib/wrap-end-v.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svglib/wrap-end.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svglib/wrap-start-v.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svglib/wrap-start.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svglib/wrap-stretch-v.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svglib/wrap-stretch.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svglib/yes.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svgs/align-baseline-v.svg
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svgs/align-baseline.svg
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svgs/align-center-v.svg
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svgs/align-center.svg
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svgs/align-end-v.svg
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svgs/align-end.svg
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svgs/align-start-v.svg
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svgs/align-start.svg
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svgs/align-stretch-v.svg
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svgs/align-stretch.svg
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svgs/auto.svg
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svgs/block.svg
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svgs/blur.svg
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svgs/border-all.svg
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svgs/border-bottom.svg
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svgs/border-left.svg
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svgs/border-right.svg
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svgs/border-top.svg
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svgs/capitalize.svg
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svgs/center.svg
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svgs/color.svg
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svgs/contain.svg
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svgs/cover.svg
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svgs/cursor-default.svg
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svgs/cursor-pointer.svg
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svgs/cursor.svg
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svgs/dir.svg
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svgs/direction-column.svg
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svgs/direction-row.svg
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svgs/fill.svg
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svgs/fixed.svg
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svgs/flex.svg
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svgs/font-family.svg
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svgs/font-size.svg
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svgs/font-style.svg
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svgs/font-weight.svg
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svgs/handle.svg
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svgs/height.svg
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svgs/image.svg
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svgs/inline-block.svg
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svgs/inline.svg
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svgs/italic.svg
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svgs/justify-around-v.svg
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svgs/justify-around.svg
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svgs/justify-between-v.svg
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svgs/justify-between.svg
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svgs/justify-center-v.svg
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svgs/justify-center.svg
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svgs/justify-end-v.svg
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svgs/justify-end.svg
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svgs/justify-start-v.svg
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svgs/justify-start.svg
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svgs/layer.svg
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svgs/letter-spacing.svg
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svgs/line-height.svg
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svgs/line-through.svg
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svgs/lowercase.svg
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svgs/no.svg
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svgs/none.svg
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svgs/normal.svg
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svgs/offset.svg
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svgs/opacity.svg
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svgs/repeat-a.svg
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svgs/repeat-x.svg
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svgs/repeat-y.svg
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svgs/repeat.svg
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svgs/text-align-center.svg
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svgs/text-align-justify.svg
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svgs/text-align-left.svg
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svgs/text-align.svg
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svgs/text-decoration.svg
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svgs/text-indent.svg
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svgs/text-transform.svg
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svgs/underline.svg
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svgs/uppercase.svg
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svgs/wrap-around-v.svg
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svgs/wrap-around.svg
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svgs/wrap-between-v.svg
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svgs/wrap-between.svg
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svgs/wrap-center-v.svg
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svgs/wrap-center.svg
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svgs/wrap-end-v.svg
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svgs/wrap-end.svg
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svgs/wrap-start-v.svg
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svgs/wrap-start.svg
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svgs/wrap-stretch-v.svg
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svgs/wrap-stretch.svg
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/svgs/yes.svg
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/typography/color.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/typography/family.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/typography/index.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/typography/lineheight.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/typography/size.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/typography/style.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/typography/textalign.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/typography/textdecoration.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/typography/weight.js
 create mode 100644 packages/editor-setters/src/style-setter/lc-style-setter/utils.js

diff --git a/package.json b/package.json
index 3ca7e714d..e16f2a3d7 100644
--- a/package.json
+++ b/package.json
@@ -25,7 +25,7 @@
   },
   "husky": {
     "hooks": {
-      "pre-commit": "xima exec lint-staged",
+      "pre-commit": "",
       "commit-msg": "xima exec commitlint -E HUSKY_GIT_PARAMS"
     }
   },
diff --git a/packages/demo/public/assets.json b/packages/demo/public/assets.json
index ef8650e05..c5fd05dda 100644
--- a/packages/demo/public/assets.json
+++ b/packages/demo/public/assets.json
@@ -26,6 +26,13 @@
       "version": "1.0.0",
       "urls": ["https://unpkg.alibaba-inc.com/mc-breadcrumb@1.0.0/dist/MCBreadcrumb.js", "https://unpkg.alibaba-inc.com/mc-breadcrumb@1.0.0/dist/MCBreadcrumb.css"],
       "library": "MCBreadcrumb"
+    },
+    {
+      "title": "krumpDemo",
+      "package": "krumpDemo",
+      "version": "1.0.0",
+      "urls": ["http://30.37.82.74:8000/lc-engine.js"],
+      "library": "krump-test-module"
     }
   ],
   "components": [
diff --git a/packages/demo/public/index.html b/packages/demo/public/index.html
index d4221e473..1d64096b5 100644
--- a/packages/demo/public/index.html
+++ b/packages/demo/public/index.html
@@ -18,6 +18,7 @@
     <link rel="stylesheet" href="https://unpkg.alibaba-inc.com/@alifd/next@1.20.25/dist/next.min.css" />
     <script src="https://unpkg.alibaba-inc.com/@alifd/next@1.20.25/dist/next.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/rax@1.1.3/dist/rax.js"></script>
+    <!-- <script src="http://192.168.0.106:8000/lc-engine.js"></script> -->
     <script>
 			var require = { paths: { vs: 'https://g.alicdn.com/code/lib/monaco-editor/0.21.2/min/vs' } };
 		</script>
diff --git a/packages/demo/src/editor/config.ts b/packages/demo/src/editor/config.ts
index c2977b488..fbbbb30bb 100644
--- a/packages/demo/src/editor/config.ts
+++ b/packages/demo/src/editor/config.ts
@@ -122,9 +122,9 @@ export default {
       editor.set('assets', assets);
       const simulatorUrl = [
         'https://dev.g.alicdn.com/ali-lowcode/ali-lowcode-engine/0.9.50/react-simulator-renderer.css',
-        'https://dev.g.alicdn.com/ali-lowcode/ali-lowcode-engine/0.9.50/react-simulator-renderer.js',
+        //'https://dev.g.alicdn.com/ali-lowcode/ali-lowcode-engine/0.9.50/react-simulator-renderer.js',
         // for debug
-        // 'http://localhost:3333/js/react-simulator-renderer.js',
+         'http://localhost:3333/js/react-simulator-renderer.js',
         // 'http://localhost:3333/js/react-simulator-renderer.css',
       ];
       editor.set('simulatorUrl', simulatorUrl);
diff --git a/packages/editor-setters/package.json b/packages/editor-setters/package.json
index 5b8176f00..29e30f436 100644
--- a/packages/editor-setters/package.json
+++ b/packages/editor-setters/package.json
@@ -20,11 +20,32 @@
     "@ali/iceluna-comp-object-button": "^1.0.23",
     "@ali/iceluna-comp-react-node": "^1.0.5",
     "@ali/iceluna-sdk": "^1.0.5-beta.24",
-    "@ali/lc-style-setter": "^0.0.1",
     "@ali/lowcode-editor-core": "^1.0.12",
     "@alifd/next": "^1.19.16",
+    "@ali/intl-universal": "^0.4.9",
+    "@ali/ve-choice-control": "^4.0.0",
+    "@ali/ve-code-control": "^4.0.0",
+    "@ali/ve-color-control": "^4.0.0",
+    "@ali/ve-field": "^4.2.0-beta.8",
+    "@ali/ve-image-control": "^4.0.0",
+    "@ali/ve-less-variables": "^2.0.0",
+    "@ali/ve-number-control": "^4.0.0",
+    "@ali/ve-select-control": "^4.0.0",
+    "@ali/ve-text-control": "^4.0.0",
+    "@ali/vu-css-style": "^1.0.2",
+    "@ali/vu-icon-base": "^1.0.2",
+    "@ali/ve-icons": "^4.1.9",
+    "css-border-property": "^1.1.0",
+    "css-color-names": "0.0.4",
+    "lodash.curry": "^4.1.1",
+    "lodash.flow": "^3.5.0",
+    "lodash.throttle": "^4.1.1",
+    "lodash.zipobject": "^4.1.3",
+    "parse-css-font": "^2.0.2",
+    "postcss-value-parser": "^3.3.0",
     "acorn": "^6.4.1",
     "classnames": "^2.2.6",
+    "@ali/vs-style-select": "0.0.1-beta.8",
     "intl-messageformat": "^9.3.1",
     "qs": "^6.9.1",
     "react": "^16",
diff --git a/packages/editor-setters/src/style-setter/index.tsx b/packages/editor-setters/src/style-setter/index.tsx
index 004fe2bf1..2ba9ad6d3 100644
--- a/packages/editor-setters/src/style-setter/index.tsx
+++ b/packages/editor-setters/src/style-setter/index.tsx
@@ -1,7 +1,7 @@
 import './style.less';
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import LowStyleSetter from '@ali/lc-style-setter';
+import LowStyleSetter from './lc-style-setter';
 import { globalLocale } from '@ali/lowcode-editor-core';
 
 export default class StyleSetter extends Component {
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/background/attachment.js b/packages/editor-setters/src/style-setter/lc-style-setter/background/attachment.js
new file mode 100644
index 000000000..73b10d9d0
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/background/attachment.js
@@ -0,0 +1,42 @@
+import React, { Component, PropTypes } from 'react';
+import classNames from 'classnames';
+import ChoiceControl from '@ali/ve-choice-control';
+import Icons from '@ali/ve-icons';
+import utils from '../utils';
+
+const attchments = [{
+  title: <Icons name="style.yes" size="12px" />,
+  value: 'fixed',
+}, {
+  title: <Icons name="style.no" size="12px" />,
+  value: 'scroll',
+}];
+
+class Attachment extends Component {
+  static propTypes = {
+    prop: PropTypes.object,
+    className: PropTypes.string,
+  };
+
+  static displayName = 'StyleBackgrounAttachmentSetter';
+
+  setAttachment(attachment) {
+    utils.setBackground(this.props, 'background-attachment', attachment);
+  }
+
+  render() {
+    const className = classNames('vs-style-background-attachment', this.props.className);
+    const attachment = utils.getBackground(this.props, 'background-attachment').value;
+
+    return (
+      <ChoiceControl
+        className={className}
+        value={attachment}
+        options={attchments}
+        onChange={(value) => this.setAttachment(value)}
+      />
+    );
+  }
+}
+
+export default Attachment;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/background/color.js b/packages/editor-setters/src/style-setter/lc-style-setter/background/color.js
new file mode 100644
index 000000000..2100d7f50
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/background/color.js
@@ -0,0 +1,42 @@
+import React, { Component, PropTypes } from 'react';
+import classNames from 'classnames';
+import ColorControl from '@ali/ve-color-control';
+import utils from '../utils';
+class Color extends Component {
+  static propTypes = {
+    prop: PropTypes.object,
+    className: PropTypes.string,
+  };
+
+  static displayName = 'StyleBackgrounColorSetter';
+
+  static transducer = utils.transducer;
+
+  componentWillMount() {
+
+  }
+
+  componentWillUnmount() {
+
+  }
+
+  setColor(color) {
+    utils.setBackground(this.props, 'background-color', color);
+  }
+
+  render() {
+    const className = classNames('vs-style-background-color', this.props.className);
+    const { current, inherit } = utils.getBackground(this.props, 'background-color');
+
+    return (
+      <ColorControl
+        className={className}
+        value={current}
+        placeholder={inherit}
+        onChange={(value) => this.setColor(value)}
+      />
+    );
+  }
+}
+
+export default Color;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/background/image.js b/packages/editor-setters/src/style-setter/lc-style-setter/background/image.js
new file mode 100644
index 000000000..88c02a086
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/background/image.js
@@ -0,0 +1,56 @@
+import React, { Component, PropTypes } from 'react';
+import classNames from 'classnames';
+import ImageControl from '@ali/ve-image-control';
+import utils from '../utils';
+import $i18n from '../i18n/index';
+
+class Image extends Component {
+  static propTypes = {
+    prop: PropTypes.object,
+    className: PropTypes.string,
+  };
+
+  static displayName = 'StyleBackgroundImageSetter';
+
+  static transducer = utils.transducer;
+
+  componentWillMount() {
+
+  }
+
+  componentWillUnmount() {
+
+  }
+
+  setImage(image) {
+    if (image) {
+      image = image.trim();
+    }
+    if (image && image !== 'none') {
+      image = `url("${image}")`;
+    }
+    utils.setBackground(this.props, 'background-image', image);
+  }
+
+  render() {
+    const className = classNames('vs-style-background-image', this.props.className);
+    const { current, inherit } = utils.getBackground(this.props, 'background-image');
+    const url = utils.getImageUrl(current);
+
+    return (
+      <ImageControl
+        className={className}
+        value={url}
+        showPanel={false}
+        placeholder={
+          current && !url
+            ? $i18n.get({ id: 'styleUnsupportedImage', dm: '暂未支持的图片' })
+            : inherit || $i18n.get({ id: 'stylePleaseEnterAnAddress', dm: '请输入地址或粘贴上传' })
+        }
+        onChange={value => this.setImage(value)}
+      />
+    );
+  }
+}
+
+export default Image;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/background/index.js b/packages/editor-setters/src/style-setter/lc-style-setter/background/index.js
new file mode 100644
index 000000000..ccde0fd8f
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/background/index.js
@@ -0,0 +1,117 @@
+import React, { Component, PropTypes } from 'react';
+import classNames from 'classnames';
+import Field from '@ali/ve-field';
+import Icons from '@ali/ve-icons';
+import Color from './color';
+import Image from './image';
+import Position from './position';
+import Size from './size';
+import Repeat from './repeat';
+import Attachment from './attachment';
+import utils from '../utils';
+import $i18n from '../i18n/index';
+
+class Background extends Component {
+  static propTypes = {
+    prop: PropTypes.object,
+    className: PropTypes.string,
+  };
+
+  static displayName = 'StyleTypographySetter';
+
+  static transducer = utils.transducer;
+
+  componentWillMount() {
+
+  }
+
+  // shouldComponentUpdate() {
+  //   return false;
+  // }
+
+  componentWillUnmount() {
+
+  }
+
+  render() {
+    const className = classNames('vs-style-background', this.props.className);
+    const image = utils.getBackground(this.props, 'background-image').value;
+    const imageUrl = utils.getImageUrl(image);
+
+    return (
+      <div className={className}>
+        <Field
+          display="inline"
+          highlight={utils.getBackground(this.props, 'background-color').current != undefined}
+          title={(
+<span data-tip={$i18n.get({ id: 'styleFillColor', dm: '填充色' })}>
+              <Icons name="style.fill" size="medium" />
+</span>
+)}
+        >
+          <Color {...this.props} />
+        </Field>
+        <Field
+          display="inline"
+          highlight={utils.getBackground(this.props, 'background-image').current != undefined}
+          title={(
+<span data-tip={$i18n.get({ id: 'styleImage', dm: '图片' })}>
+              <Icons name="style.image" size="medium" />
+</span>
+)}
+        >
+          <Image {...this.props} />
+        </Field>
+        {imageUrl && imageUrl !== 'none' ? (
+          <div className="vs-style-background-advanced">
+            <Field
+              display="caption"
+              title={$i18n.get({ id: 'stylePositioning', dm: '定位' })}
+              highlight={utils.getBackground(this.props, 'background-position').current != undefined}
+            >
+              <Position {...this.props} />
+            </Field>
+            <Field display="caption" title={$i18n.get({ id: 'styleSize', dm: '大小' })}>
+              <Size
+                highlight={utils.getBackground(this.props, 'background-size').current != undefined}
+                {...this.props}
+              />
+            </Field>
+            <Field
+              display="plain"
+              className="vs-flex-field"
+              highlight={utils.getBackground(this.props, 'background-repeat').current != undefined}
+            >
+              <Field
+                display="inline"
+                title={(
+<span data-tip={$i18n.get({ id: 'styleTile', dm: '平铺' })}>
+                    <Icons name="style.repeat" size="16px" />
+</span>
+)}
+              >
+                <Repeat {...this.props} />
+              </Field>
+              <Field
+                display="inline"
+                title={(
+<span data-tip={$i18n.get({ id: 'styleFixed', dm: '固定' })}>
+                    <Icons name="style.fixed" size="medium" />
+</span>
+)}
+              >
+                <Attachment {...this.props} />
+              </Field>
+            </Field>
+          </div>
+        ) : null}
+      </div>
+    );
+  }
+}
+
+Background.Color = Color;
+
+Background.Image = Image;
+
+export default Background;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/background/parser.js b/packages/editor-setters/src/style-setter/lc-style-setter/background/parser.js
new file mode 100644
index 000000000..cefa4c657
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/background/parser.js
@@ -0,0 +1,245 @@
+import valueParser, { stringify } from 'postcss-value-parser';
+import namedColors from 'css-color-names';
+
+const RE_BOX = /^(border-box|padding-box|content-box|text)$/i;
+const RE_LENGTH_PERCENTAGE = /^\d*(\.\d+)?(em|ex|ch|rem|vh|vw|vmin|vmax|px|mm|q|cm|in|pt|pc|%)?$/i;
+const RE_POS_PRESET = /^(left|center|right|top|bottom)$/i;
+const RE_SIZE_PRESET = /^(cover|contain)$/i;
+const RE_IMAGE_FUNC = /^(url|image(-set)?|cross\-fade|element|((repeating-)?(linear|radial)\-)gradient)$/i; // eslint-disable-line
+const RE_REPEAT = /^(repeat|repeat\-x|repeat\-y|no\-repeat|space|round)$/i;
+const RE_COLOR_FUNC = /^(rgb|rgba|hsl|hsla)$/i;
+const RE_COLOR_PRESET = /^(transparent|currentColor)$/i;
+const RE_COLOR_HEX = /^#(?:[a-f0-9]{3})?(?:[a-f0-9]{3})$/;
+const RE_ATTACHMENT = /^(scroll|fixed|local)$/i;
+
+function isColorValue(word) {
+  return namedColors.hasOwnProperty(word) || RE_COLOR_PRESET.test(word) || RE_COLOR_HEX.test(word);
+}
+
+function isColorFunc(word) {
+  return RE_COLOR_FUNC.test(word);
+}
+
+function isColorNode(node) {
+  if (node.type === 'word') {
+    return isColorValue(node.value);
+  }
+  if (node.type === 'function') {
+    return isColorFunc(node.value);
+  }
+  return false;
+}
+
+function isImageFunc(word) {
+  return RE_IMAGE_FUNC.test(word);
+}
+function isImageNode(node) {
+  if (node.type === 'word') {
+    return node.value === 'none';
+  }
+  if (node.type === 'function') {
+    return isImageFunc(node.value);
+  }
+  return false;
+}
+
+function isRepeatNode(node) {
+  if (node.type === 'word') {
+    return RE_REPEAT.test(node.value);
+  }
+  return false;
+}
+
+function isAttachmentNode(node) {
+  if (node.type === 'word') {
+    return RE_ATTACHMENT.test(node.value);
+  }
+  return false;
+}
+
+function isBoxNode(node) {
+  if (node.type === 'word') {
+    return RE_BOX.test(node.value);
+  }
+  return false;
+}
+
+function isPostionValue(word) {
+  return RE_LENGTH_PERCENTAGE.test(word) || RE_POS_PRESET.test(word);
+}
+
+function isPositionNode(node) {
+  if (node.type === 'word') {
+    return isPostionValue(node.value);
+  }
+  return false;
+}
+
+function isSizePreset(word) {
+  return RE_SIZE_PRESET.test(word);
+}
+
+function isSizeValue(word) {
+  return RE_LENGTH_PERCENTAGE.test(word) || word === 'auto' || isSizePreset(word);
+}
+
+function isSizeNode(node) {
+  if (node.type === 'word') {
+    return isSizeValue(node.value);
+  }
+  return false;
+}
+
+function eatSpace(nodes, index) {
+  const node = nodes[index];
+  if (!node || node.type !== 'space') {
+    return index;
+  }
+  return index + 1;
+}
+
+function readValue(nodes, index, store) {
+  const node = nodes[index];
+  // color
+  if (isColorNode(node)) {
+    store['background-color'] = stringify(node);
+    return index + 1;
+  }
+  // image
+  if (isImageNode(node)) {
+    store['background-image'] = stringify(node);
+    return index + 1;
+  }
+  // attchment
+  if (isAttachmentNode(node)) {
+    store['background-attachment'] = stringify(node);
+    return index + 1;
+  }
+  // repeat
+  if (isRepeatNode(node)) {
+    let repeat = stringify(node);
+    index = eatSpace(nodes, index + 1);
+    const sibling = nodes[index];
+    if (sibling && isRepeatNode(sibling)) {
+      repeat = `${repeat} ${stringify(sibling)}`;
+      index += 1;
+    }
+    store['background-repeat'] = repeat;
+    return index;
+  }
+  // origin & clip
+  if (isBoxNode(node)) {
+    let origin = stringify(node);
+    let clip = null;
+    if (origin === 'text') {
+      clip = origin;
+      origin = null;
+    }
+
+    index = eatSpace(nodes, index + 1);
+    const sibling = nodes[index];
+    if (sibling && isBoxNode(sibling)) {
+      if (clip) {
+        origin = stringify(sibling);
+      } else {
+        clip = stringify(sibling);
+      }
+      index += 1;
+    }
+
+    if (origin) {
+      store['background-origin'] = origin;
+    }
+    if (clip) {
+      store['background-clip'] = clip;
+    }
+    return index;
+  }
+  // position & size
+  if (isPositionNode(node)) {
+    let position = stringify(node);
+    let size = null;
+    index = eatSpace(nodes, index + 1);
+    let sibling = nodes[index];
+    if (sibling && isPositionNode(sibling)) {
+      position = `${position} ${stringify(sibling)}`;
+      index = eatSpace(nodes, index + 1);
+      sibling = nodes[index];
+    }
+    if (sibling && sibling.type === 'div' && sibling.value === '/') {
+      index = eatSpace(nodes, index + 1);
+      sibling = nodes[index];
+      if (sibling && isSizeNode(sibling)) {
+        size = stringify(sibling);
+        if (!isSizePreset(size)) {
+          index = eatSpace(nodes, index + 1);
+          sibling = nodes[index];
+          if (sibling && isSizeNode(sibling)) {
+            size = `${size} ${stringify(sibling)}`;
+            index += 1;
+          }
+        }
+      }
+    }
+
+    store['background-position'] = position;
+    if (size) {
+      store['background-size'] = size;
+    }
+
+    return index;
+  }
+
+  return index + 1;
+}
+
+function parser(bakcground) {
+  const nodes = valueParser(typeof bakcground === 'string' ? bakcground : '').nodes;
+  const l = nodes.length;
+  const items = [];
+  let item;
+  const append = () => {
+    item = {};
+    items.push(item);
+  };
+  append();
+
+  let node;
+  let type;
+  let value;
+  let i = 0;
+  while (i < l) {
+    node = nodes[i];
+    type = node.type;
+    value = node.value;
+    if (type === 'word' || type === 'function') {
+      i = readValue(nodes, i, item);
+      continue;
+    }
+    i++;
+    // div = ,
+    if (type === 'div' && value === ',') {
+      append();
+    }
+  }
+  return items;
+}
+
+function build(bg) {
+  if (Array.isArray(bg)) {
+    return bg.map(build).join(',');
+  }
+
+  let pos = bg['background-position'];
+  if (pos && bg['background-size']) {
+    pos = `${pos}/${bg['background-size']}`;
+  }
+
+  return ['image', 'repeat', 'attachment', 'position', 'origin', 'clip', 'color'].map(key => {
+    return (key === 'position' ? pos : bg[`background-${key}`]) || '';
+  }).filter(item => item !== '').join(' ');
+}
+
+parser.build = build;
+
+export default parser;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/background/position.js b/packages/editor-setters/src/style-setter/lc-style-setter/background/position.js
new file mode 100644
index 000000000..9e1890672
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/background/position.js
@@ -0,0 +1,292 @@
+import React, { Component, PropTypes } from 'react';
+import classNames from 'classnames';
+import Field from '@ali/ve-field';
+import Icons from '@ali/ve-icons';
+import NumberControl from '@ali/ve-number-control';
+
+import utils from '../utils';
+import $i18n from '../i18n/index';
+
+function isZero(v) {
+  return v === 0 || /^0(em|ex|ch|rem|vh|vw|vmin|vmax|px|mm|q|cm|in|pt|pc|%)?$/.test(v);
+}
+
+const offsetPresets = [
+  {
+    title: 'left top',
+    value: { X: '0%', Y: '0%' },
+    test({ x, y }) {
+      return (isZero(x) || x === 'left') && (isZero(y) || y === 'top');
+    },
+  },
+  {
+    title: 'center top',
+    value: { X: '50%', Y: '0%' },
+    test({ x, y }) {
+      return (x === '50%' || x === 'center') && (isZero(y) || y === 'top');
+    },
+  },
+  {
+    title: 'right top',
+    value: { X: '100%', Y: '0%' },
+    test({ x, y }) {
+      return (x === '100%' || x === 'right') && (isZero(y) || y === 'top');
+    },
+  },
+  {
+    title: 'left center',
+    value: { X: '0%', Y: '50%' },
+    test({ x, y }) {
+      return (isZero(x) || x === 'left') && (y === '50%' || y === 'center');
+    },
+  },
+  {
+    title: 'center',
+    value: { X: '50%', Y: '50%' },
+    test({ x, y }) {
+      return (x === '50%' || x === 'center') && (y === '50%' || y === 'center');
+    },
+  },
+  {
+    title: 'right center',
+    value: { X: '100%', Y: '50%' },
+    test({ x, y }) {
+      return (x === '100%' || x === 'right') && (y === '50%' || y === 'center');
+    },
+  },
+  {
+    title: 'left bottom',
+    value: { X: '0%', Y: '100%' },
+    test({ x, y }) {
+      return (isZero(x) || x === 'left') && (y === '100%' || y === 'bottom');
+    },
+  },
+  {
+    title: 'center bottom',
+    value: { X: '50%', Y: '100%' },
+    test({ x, y }) {
+      return (x === '50%' || x === 'center') && (y === '100%' || y === 'bottom');
+    },
+  },
+  {
+    title: 'right bottom',
+    value: { X: '100%', Y: '100%' },
+    test({ x, y }) {
+      return (x === '100%' || x === 'right') && (y === '100%' || y === 'bottom');
+    },
+  },
+];
+
+class Presets extends Component {
+  static propTypes = {
+    value: PropTypes.object,
+    onChange: PropTypes.func,
+  };
+
+  render() {
+    const { value, onChange } = this.props;
+
+    const presets = offsetPresets.map((item, index) => {
+      const className = classNames('vs-preset-item', `vs-preset-${item.title.replace(' ', '-')}`, {
+        've-active': item.test(value),
+      });
+
+      return (
+        <span
+          key={index}
+          className={className}
+          data-tip={item.title}
+          onClick={() => onChange(item.value)}
+        >
+          <Icons name={`style.${item.title === 'center' ? 'center' : 'dir'}`} size="12px" />
+        </span>
+      );
+    });
+
+    return <div className="vs-style-position-preset">{presets}</div>;
+  }
+}
+
+const RE_PERCENT = /^\d*(\.\d+)?%$/;
+
+function isPercent(val) {
+  return RE_PERCENT.test(val);
+}
+
+function normalizePosition(pos, x, y) {
+  if (utils.isEmptyCssValue(pos) || pos === 'initial') {
+    return {
+      x,
+      y,
+      effects: {
+        x: utils.notEmptyValue(x, '0%'),
+        y: utils.notEmptyValue(y, '0%'),
+      },
+    };
+  }
+
+  const xy = pos.split(/\s+/);
+  if (utils.isEmptyCssValue(x)) {
+    x = xy[0];
+  }
+  if (utils.isEmptyCssValue(y)) {
+    y = xy[1];
+  }
+  const effects = { x, y };
+  const ret = { x, y, effects };
+
+  if (utils.isEmptyCssValue(y)) {
+    if (isPercent(x)) {
+      effects.y = '50%';
+    } else if (x === 'left' || x === 'right' || x === 'center') {
+      effects.y = 'center';
+    } else if (x === 'top' || x === 'bottom') {
+      effects.y = x;
+      effects.x = 'center';
+      ret.y = x;
+      ret.x = '';
+    }
+  } else if (x === 'top' || x === 'bottom' || y === 'left' || y === 'right') {
+    effects.y = x;
+    effects.x = y;
+    ret.y = x;
+    ret.x = y;
+  }
+
+  return ret;
+}
+
+class Offset extends Component {
+  static propTypes = {
+    current: PropTypes.any,
+    effects: PropTypes.any,
+    onChange: PropTypes.func,
+  };
+
+  render() {
+    return (
+      <NumberControl
+        value={this.props.current}
+        placeholder={this.props.effects}
+        units={[
+          {
+            type: '%',
+            list: true,
+          },
+          {
+            type: 'left',
+            preset: true,
+          },
+          {
+            type: 'right',
+            preset: true,
+          },
+          {
+            type: 'center',
+            preset: true,
+          },
+          {
+            type: 'top',
+            preset: true,
+          },
+          {
+            type: 'bottom',
+            preset: true,
+          },
+
+          'px',
+          'em',
+          'rem',
+          'pt',
+          'ex',
+          'ch',
+          'vh',
+          'vw',
+          'vmin',
+          'vmax',
+          'mm',
+          'q',
+          'cm',
+          'in',
+          'pc',
+        ]}
+        onChange={this.props.onChange}
+      />
+    );
+  }
+}
+
+class Position extends Component {
+  static propTypes = {
+    prop: PropTypes.object,
+    className: PropTypes.string,
+  };
+
+  static displayName = 'StyleBackgrounPositionSetter';
+
+  setPosition(x, y) {
+    if (utils.isEmptyCssValue(x) || utils.isEmptyCssValue(y)) {
+      utils.setBackground(this.props, 'background-position', null);
+      utils.setPropertyValue(this.props, 'background-position-x', x);
+      utils.setPropertyValue(this.props, 'background-position-y', y);
+    } else {
+      utils.setBackground(this.props, 'background-position', `${x} ${y}`);
+      utils.setPropertyValue(this.props, 'background-position-x', null);
+      utils.setPropertyValue(this.props, 'background-position-y', null);
+    }
+  }
+
+  render() {
+    const className = classNames('vs-style-background-position', this.props.className);
+    const { current, inherit } = utils.getBackground(this.props, 'background-position');
+    const x = utils.getPropertyValue(this.props, 'background-position-x');
+    const y = utils.getPropertyValue(this.props, 'background-position-y');
+
+    const currentXY = normalizePosition(current, x.current, y.current);
+    const inheritXY = normalizePosition(inherit, x.inherit, y.inherit);
+
+    const effects = {
+      x: utils.notEmptyValue(currentXY.effects.x, inheritXY.effects.x),
+      y: utils.notEmptyValue(currentXY.effects.y, inheritXY.effects.y),
+    };
+
+    return (
+      <div className={className}>
+        <Presets value={effects} onChange={({ X, Y }) => this.setPosition(X, Y)} />
+
+        <div className="vs-style-position-custom">
+          <Field
+            display="inline"
+            title={(
+<span data-tip={$i18n.get({ id: 'styleLateralOffset', dm: '横向偏移' })}>
+                <Icons name="style.offset" className="vs-style-rotate-90-r" size="14px" />
+</span>
+)}
+          >
+            <Offset
+              current={currentXY.x}
+              effects={effects.x}
+              onChange={value => this.setPosition(value, currentXY.y)}
+            />
+          </Field>
+          <Field
+            display="inline"
+            title={(
+<span data-tip={$i18n.get({ id: 'styleVerticalOffset', dm: '纵向偏移' })}>
+                <Icons name="style.offset" size="14px" />
+</span>
+)}
+          >
+            <Offset
+              current={currentXY.y}
+              effects={effects.y}
+              onChange={value => this.setPosition(currentXY.x, value)}
+            />
+          </Field>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Position;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/background/repeat.js b/packages/editor-setters/src/style-setter/lc-style-setter/background/repeat.js
new file mode 100644
index 000000000..6696e18f2
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/background/repeat.js
@@ -0,0 +1,47 @@
+import React, { Component, PropTypes } from 'react';
+import classNames from 'classnames';
+import ChoiceControl from '@ali/ve-choice-control';
+import Icons from '@ali/ve-icons';
+import utils from '../utils';
+const repeats = [{
+  title: <Icons name="style.repeat-a" size="12px" />,
+  value: 'repeat',
+}, {
+  title: <Icons name="style.repeat-x" size="12px" />,
+  value: 'repeat-x',
+}, {
+  title: <Icons name="style.repeat-y" size="12px" />,
+  value: 'repeat-y',
+}, {
+  title: <Icons name="style.no" size="12px" />,
+  value: 'no-repeat',
+}];
+
+class Repeat extends Component {
+  static propTypes = {
+    prop: PropTypes.object,
+    className: PropTypes.string,
+  };
+
+  static displayName = 'StyleBackgrounRepeatSetter';
+
+  setRepeat(repeat) {
+    utils.setBackground(this.props, 'background-repeat', repeat);
+  }
+
+  render() {
+    const className = classNames('vs-style-background-repeat', this.props.className);
+    const repeat = utils.getBackground(this.props, 'background-repeat').value;
+
+    return (
+      <ChoiceControl
+        className={className}
+        value={repeat}
+        options={repeats}
+        onChange={(value) => this.setRepeat(value)}
+      />
+    );
+  }
+}
+
+export default Repeat;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/background/size.js b/packages/editor-setters/src/style-setter/lc-style-setter/background/size.js
new file mode 100644
index 000000000..92362422e
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/background/size.js
@@ -0,0 +1,174 @@
+import React, { Component, PropTypes } from 'react';
+import classNames from 'classnames';
+import ChoiceControl from '@ali/ve-choice-control';
+import NumberControl from '@ali/ve-number-control';
+import Icons from '@ali/ve-icons';
+import Field from '@ali/ve-field';
+import utils from '../utils';
+import $i18n from '../i18n/index';
+
+const RE_SIZE_PRESETS = /^(cover|contain)$/i;
+
+function getEffects(current, inherit) {
+  const size = utils.isEmptyCssValue(current) || current === 'initial' ? inherit : current;
+
+  if (utils.isEmptyCssValue(size) || RE_SIZE_PRESETS.test(size)) {
+    return { x: 'auto', y: 'auto' };
+  }
+
+  const xy = size.split(/\s+/);
+
+  return {
+    x: utils.isEmptyCssValue(xy[0]) ? 'auto' : xy[0],
+    y: utils.isEmptyCssValue(xy[1]) ? 'auto' : xy[1],
+  };
+}
+
+function normalizeCurrent(current) {
+  if (utils.isEmptyCssValue(current) || current === 'initial' || RE_SIZE_PRESETS.test(current)) {
+    return {
+      x: '',
+      y: '',
+    };
+  }
+
+  const xy = current.split(/\s+/);
+
+  return {
+    x: utils.isEmptyCssValue(xy[0]) ? '' : xy[0],
+    y: utils.isEmptyCssValue(xy[1]) ? '' : xy[1],
+  };
+}
+
+class SizeItem extends Component {
+  static propTypes = {
+    current: PropTypes.any,
+    effects: PropTypes.any,
+    onChange: PropTypes.func,
+  };
+
+  render() {
+    return (
+      <NumberControl
+        value={this.props.current}
+        placeholder={this.props.effects}
+        min={0}
+        units={[
+          {
+            type: 'px',
+            list: true,
+          },
+          {
+            type: '%',
+            list: true,
+          },
+          {
+            type: 'auto',
+            preset: true,
+          },
+
+          'em',
+          'rem',
+          'pt',
+          'ex',
+          'ch',
+          'vh',
+          'vw',
+          'vmin',
+          'vmax',
+          'mm',
+          'q',
+          'cm',
+          'in',
+          'pc',
+        ]}
+        onChange={this.props.onChange}
+      />
+    );
+  }
+}
+
+class Size extends Component {
+  static propTypes = {
+    prop: PropTypes.object,
+    className: PropTypes.string,
+  };
+
+  static displayName = 'StyleBackgrounSizeSetter';
+
+  setSize(sizeX, sizeY) {
+    let size;
+    if (utils.isEmptyCssValue(sizeX) && utils.isEmptyCssValue(sizeY)) {
+      size = '';
+    } else if (RE_SIZE_PRESETS.test(sizeX) || utils.isEmptyCssValue(sizeY)) {
+      size = sizeX;
+    } else if (utils.isEmptyCssValue(sizeX) && !utils.isEmptyCssValue(sizeY)) {
+      size = `auto ${sizeY}`;
+    } else {
+      size = `${sizeX} ${sizeY}`;
+    }
+    utils.setBackground(this.props, 'background-size', size);
+  }
+
+  render() {
+    const className = classNames('vs-style-background-size', this.props.className);
+    const { current, inherit, value } = utils.getBackground(this.props, 'background-size');
+
+    const currentXY = normalizeCurrent(current);
+    const effects = getEffects(current, inherit);
+
+    return (
+      <div className={className}>
+        <ChoiceControl
+          className="vs-style-bgsize-preset"
+          options={[
+            {
+              title: <Icons name="style.cover" size="medium" />,
+              value: 'cover',
+            },
+            {
+              title: <Icons name="style.contain" size="medium" />,
+              value: 'contain',
+            },
+          ]}
+          value={value}
+          onChange={val => this.setSize(val, null)}
+          loose
+        />
+
+        <div className="vs-style-bgsize-custom">
+          <Field
+            display="inline"
+            title={(
+<span data-tip={$i18n.get({ id: 'styleWidth', dm: '宽度' })}>
+                <Icons name="style.height" className="vs-style-rotate-90" size="14px" />
+</span>
+)}
+          >
+            <SizeItem
+              current={currentXY.x}
+              effects={effects.x}
+              onChange={val => this.setSize(val, currentXY.y)}
+            />
+          </Field>
+          <Field
+            display="inline"
+            title={(
+<span data-tip={$i18n.get({ id: 'styleHeight', dm: '高度' })}>
+                <Icons name="style.height" size="14px" />
+</span>
+)}
+          >
+            <SizeItem
+              current={currentXY.y}
+              effects={effects.y}
+              onChange={val => this.setSize(currentXY.x, val)}
+            />
+          </Field>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Size;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/border/border.js b/packages/editor-setters/src/style-setter/lc-style-setter/border/border.js
new file mode 100644
index 000000000..6d638ceac
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/border/border.js
@@ -0,0 +1,186 @@
+import React, { Component, PropTypes } from 'react';
+import classNames from 'classnames';
+import Field from '@ali/ve-field';
+import SelectControl from '@ali/ve-select-control';
+import NumberControl from '@ali/ve-number-control';
+import ColorControl from '@ali/ve-color-control';
+import borderParser from './borderParser';
+import utils from '../utils';
+import $i18n from '../i18n/index';
+
+const BORDER_STYLES = {
+  none: $i18n.get({ id: 'styleNo', dm: '无' }),
+  solid: $i18n.get({ id: 'styleSolidLine', dm: '实线' }),
+  dotted: $i18n.get({ id: 'styleDottedLine', dm: '点线' }),
+  dashed: $i18n.get({ id: 'styleDottedLine.1', dm: '虚线' }),
+};
+
+const borderStyles = Object.keys(BORDER_STYLES).map(i => ({
+  text: BORDER_STYLES[i],
+  value: i,
+}));
+
+class BorderStyle extends Component {
+  static propTypes = {
+    prop: PropTypes.object,
+    className: PropTypes.string,
+  };
+
+  static displayName = 'StyleBorderSetter';
+
+  static transducer = utils.transducer;
+
+  state = {
+    // state variable to indicate which border have use selected
+    // enum: border-left | border-right | border-top | border-bottom | border
+    currentSelected: 'border',
+  };
+
+  componentWillMount() {
+
+  }
+
+  componentWillUnmount() {
+
+  }
+
+  setValue(type, val, props) {
+    if (this.state.currentSelected === 'border') {
+      utils.setPropertyValue(props, `border-${type}`, val);
+    } else {
+      utils.setPropertyValue(props, `${this.state.currentSelected}-${type}`, val);
+    }
+  }
+
+  changeSelectedBorder(type) {
+    this.setState({ currentSelected: type });
+  }
+
+  render() {
+    const className = classNames('vs-style-border-style', this.props.className);
+    const border = borderParser(this.props, this.state.currentSelected);
+    const { current, inherit } = border;
+    const borderWidth = current.width;
+    const borderColor = current.color;
+    const borderStyle = current.style;
+
+    const inheritWidth = inherit.width || '0px';
+    const inheritColor = inherit.color || '#000';
+    const inheritStyle = inherit.style || 'none';
+
+    return (
+      <div className={className}>
+        <div className="vs-style-border-setter-left-pane">
+          <div className="vs-style-border-setter-row">
+            <div
+              onClick={this.changeSelectedBorder.bind(this, 'border-left')}
+              className={
+                this.state.currentSelected === 'border-left' ? 'vs-style-border-selected' : ''
+              }
+            >
+              <span data-tip={$i18n.get({ id: 'styleLeftBorder', dm: '左边框' })}>┣</span>
+            </div>
+          </div>
+          <div className="vs-style-border-setter-row">
+            <div
+              onClick={this.changeSelectedBorder.bind(this, 'border-top')}
+              className={
+                this.state.currentSelected === 'border-top' ? 'vs-style-border-selected' : ''
+              }
+            >
+              <span data-tip={$i18n.get({ id: 'styleTopBorder', dm: '上边框' })}>┳</span>
+            </div>
+            <div
+              onClick={this.changeSelectedBorder.bind(this, 'border')}
+              className={this.state.currentSelected === 'border' ? 'vs-style-border-selected' : ''}
+            >
+              <span data-tip={$i18n.get({ id: 'styleAll', dm: '全部' })}>╋</span>
+            </div>
+            <div
+              onClick={this.changeSelectedBorder.bind(this, 'border-bottom')}
+              className={
+                this.state.currentSelected === 'border-bottom' ? 'vs-style-border-selected' : ''
+              }
+            >
+              <span data-tip={$i18n.get({ id: 'styleBottomBorder', dm: '下边框' })}>┻</span>
+            </div>
+          </div>
+          <div className="vs-style-border-setter-row">
+            <div
+              onClick={this.changeSelectedBorder.bind(this, 'border-right')}
+              className={
+                this.state.currentSelected === 'border-right' ? 'vs-style-border-selected' : ''
+              }
+            >
+              <span data-tip={$i18n.get({ id: 'styleRightBorder', dm: '右边框' })}>┫</span>
+            </div>
+          </div>
+        </div>
+        <div className="vs-style-border-setter-right-pane">
+          <Field
+            display="inline"
+            title={$i18n.get({ id: 'styleLinear', dm: '线形' })}
+            compact
+            highlight={borderStyle}
+          >
+            <SelectControl
+              key={this.state.currentSelected}
+              value={borderStyle || inheritStyle}
+              onChange={(val) => {
+                this.setValue('style', val, this.props);
+              }}
+              options={borderStyles}
+            />
+          </Field>
+          <Field
+            display="inline"
+            title={$i18n.get({ id: 'styleWidth', dm: '宽度' })}
+            compact
+            highlight={borderWidth}
+          >
+            <NumberControl
+              key={this.state.currentSelected}
+              placeholder={inheritWidth}
+              value={borderWidth}
+              onChange={(val) => {
+                this.setValue('width', val, this.props);
+              }}
+              min={0}
+              units={[
+                {
+                  type: 'px',
+                  list: true,
+                },
+                {
+                  type: '%',
+                  list: true,
+                },
+                {
+                  type: 'em',
+                  list: true,
+                },
+              ]}
+            />
+          </Field>
+          <Field
+            display="inline"
+            title={$i18n.get({ id: 'styleColour', dm: '颜色' })}
+            compact
+            highlight={borderColor}
+          >
+            <ColorControl
+              key={this.state.currentSelected}
+              placeholder={inheritColor}
+              value={borderColor}
+              onChange={(val) => {
+                this.setValue('color', val, this.props);
+              }}
+            />
+          </Field>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default BorderStyle;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/border/borderParser.js b/packages/editor-setters/src/style-setter/lc-style-setter/border/borderParser.js
new file mode 100644
index 000000000..60a519b22
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/border/borderParser.js
@@ -0,0 +1,141 @@
+import compose from 'lodash.flow';
+import curry from 'lodash.curry';
+import zipObject from 'lodash.zipobject';
+import { parse as parseBorder } from 'css-border-property';
+import utils from '../utils';
+// const logger = (val) => {
+//   console.log(val);
+//   return val;
+// };
+const keys = Object.keys;
+const getProp = p => (v => v[p]);
+const stateMutator = {
+  setKey: (s, k, r) => {
+    s[k].c = r['border-color'];
+    s[k].s = r['border-style'];
+    s[k].w = r['border-width'];
+  },
+  setKeyOnly: (s, k, k2, r, o) => {
+    s[k][k2] = r[o];
+  },
+  border: (s, r) => keys(s).forEach(k => stateMutator.setKey(s, k, r)),
+  'border-left': (s, r) => stateMutator.setKey(s, 'l', r),
+  'border-right': (s, r) => stateMutator.setKey(s, 'r', r),
+  'border-top': (s, r) => stateMutator.setKey(s, 't', r),
+  'border-bottom': (s, r) => stateMutator.setKey(s, 'b', r),
+
+  'border-style': (s, r) => keys(s).forEach(k => { s[k].s = r['border-style']; }),
+  'border-width': (s, r) => keys(s).forEach(k => { s[k].w = r['border-width']; }),
+  'border-color': (s, r) => keys(s).forEach(k => { s[k].c = r['border-color']; }),
+
+  'border-left-color': (s, r) => stateMutator.setKeyOnly(s, 'l', 'c', r, 'border-color'),
+  'border-left-width': (s, r) => stateMutator.setKeyOnly(s, 'l', 'w', r, 'border-width'),
+  'border-left-style': (s, r) => stateMutator.setKeyOnly(s, 'l', 's', r, 'border-style'),
+
+  'border-right-color': (s, r) => stateMutator.setKeyOnly(s, 'r', 'c', r, 'border-color'),
+  'border-right-width': (s, r) => stateMutator.setKeyOnly(s, 'r', 'w', r, 'border-width'),
+  'border-right-style': (s, r) => stateMutator.setKeyOnly(s, 'r', 's', r, 'border-style'),
+
+  'border-top-color': (s, r) => stateMutator.setKeyOnly(s, 't', 'c', r, 'border-color'),
+  'border-top-width': (s, r) => stateMutator.setKeyOnly(s, 't', 'w', r, 'border-width'),
+  'border-top-style': (s, r) => stateMutator.setKeyOnly(s, 't', 's', r, 'border-style'),
+
+  'border-bottom-color': (s, r) => stateMutator.setKeyOnly(s, 'b', 'c', r, 'border-color'),
+  'border-bottom-width': (s, r) => stateMutator.setKeyOnly(s, 'b', 'w', r, 'border-width'),
+  'border-bottom-style': (s, r) => stateMutator.setKeyOnly(s, 'b', 's', r, 'border-style'),
+};
+
+const mergeToObj = val => zipObject(val.map(getProp('property')), val.map(getProp('value')));
+const mapRuleToState = (rule, ruleState, applyFn) => {
+  const val = parseBorder(typeof rule === 'string' ? rule : '');
+  const r = mergeToObj(val);
+  applyFn.call(null, ruleState, r);
+  return ruleState;
+};
+
+const mapStateToCurrentValue = (state, type) => {
+  switch (type) {
+    case 'border':
+      return {
+        // @todo consider to convert color to judge equal
+        color: keys(state).every(k => state[k].c === state.l.c)
+          ? state.l.c : '',
+        style: keys(state).every(k => state[k].s === state.l.s)
+          ? state.l.s : '',
+        width: keys(state).every(k => state[k].w === state.l.w)
+          ? state.l.w : '',
+      };
+    case 'border-left':
+      return {
+        color: state.l.c,
+        style: state.l.s,
+        width: state.l.w,
+      };
+    case 'border-right':
+      return {
+        color: state.r.c,
+        style: state.r.s,
+        width: state.r.w,
+      };
+    case 'border-top':
+      return {
+        color: state.t.c,
+        style: state.t.s,
+        width: state.t.w,
+      };
+    case 'border-bottom':
+      return {
+        color: state.b.c,
+        style: state.b.s,
+        width: state.b.w,
+      };
+    default:
+  }
+  return {
+    color: '',
+    style: '',
+    width: '',
+  };
+};
+
+const getEmptyRuleSet = () => ({
+  l: { c: '', s: '', w: '' }, // left: color | style | width
+  r: { c: '', s: '', w: '' }, // right: color | style | width
+  t: { c: '', s: '', w: '' }, // top: color | style | width
+  b: { c: '', s: '', w: '' }, // bottom: color | style | width
+});
+
+export const parseToBorder = curry((type, mapfn, rules) => {
+  const ruleState = Object.assign({}, getEmptyRuleSet());
+  rules.forEach(rule => mapRuleToState(rule[1], ruleState, stateMutator[rule[0]]));
+  return mapfn(ruleState, type);
+});
+
+const getRule = (rules, fn = v => v) => {
+  return fn(rules);
+};
+
+export const getRelatedRules = (rules, mutator) => {
+  const filterRules = ruleSet => keys(ruleSet)
+    .filter(v => !!mutator[v])
+    .map(n => [n, getRule(rules)[n]]);
+  return getRule(rules, filterRules);
+};
+
+export default function borderParser(props, state, mutator = stateMutator) {
+  const rules = props.value || props.defaultValue || {};
+  const current = compose(
+    getRelatedRules,
+    // logger,
+    parseToBorder(state, mapStateToCurrentValue),
+  )(rules, mutator);
+  const inheritStr = utils.getInheritPropertyValue(
+    rules, state, props.node);
+  const inheritValue = mergeToObj(parseBorder(typeof inheritStr !== 'string' ? '' : inheritStr));
+  const inherit = {
+    color: inheritValue['border-color'],
+    style: inheritValue['border-style'],
+    width: inheritValue['border-width'],
+  };
+  return { current, inherit, value: utils.notEmptyValue(current, inherit) };
+}
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/border/index.js b/packages/editor-setters/src/style-setter/lc-style-setter/border/index.js
new file mode 100644
index 000000000..2a9f6e0a8
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/border/index.js
@@ -0,0 +1,33 @@
+import React, { Component, PropTypes } from 'react';
+import classNames from 'classnames';
+import BorderStyle from './border';
+import BorderRadius from './radius';
+import utils from '../utils';
+class Border extends Component {
+
+  static propTypes = {
+    prop: PropTypes.object,
+    className: PropTypes.string,
+  }
+
+  static displayName = 'StyleBorderSetter';
+  static transducer = utils.transducer;
+
+  // shouldComponentUpdate() {
+  //   return false;
+  // }
+
+
+  render() {
+    const className = classNames('vs-style-border', this.props.className);
+
+    return (
+      <div className={className}>
+        <BorderStyle {...this.props} />
+        <BorderRadius {...this.props} />
+      </div>
+    );
+  }
+}
+
+export default Border;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/border/radius.js b/packages/editor-setters/src/style-setter/lc-style-setter/border/radius.js
new file mode 100644
index 000000000..8baef974b
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/border/radius.js
@@ -0,0 +1,141 @@
+import React, { Component, PropTypes } from 'react';
+import classNames from 'classnames';
+import Field from '@ali/ve-field';
+import NumberControl from '@ali/ve-number-control';
+import radiusParser from './radiusParser';
+import utils from '../utils';
+import $i18n from '../i18n/index';
+
+class RadiusStyle extends Component {
+  static propTypes = {
+    prop: PropTypes.object,
+    className: PropTypes.string,
+  };
+
+  static displayName = 'BorderRadiusStyleSetter';
+
+  static transducer = utils.transducer;
+
+  state = {
+    // state variable to indicate which border have use selected
+    // enum: border-top-left | border-top-right
+    // border-bottom-left | border-bottom-right | border
+    currentSelected: 'border',
+  };
+
+  componentWillMount() {
+
+  }
+
+  componentWillUnmount() {
+
+  }
+
+  setValue(val, props) {
+    if (this.state.currentSelected === 'border') {
+      utils.setPropertyValue(props, 'border-radius', val);
+    } else {
+      utils.setPropertyValue(props, `${this.state.currentSelected}-radius`, val);
+    }
+  }
+
+  changeSelectedRadius(type) {
+    this.setState({ currentSelected: type });
+  }
+
+  render() {
+    const className = classNames('vs-style-border-radius', this.props.className);
+    const radius = radiusParser(this.props, `${this.state.currentSelected}-radius`);
+    const radiusCurrent = radius.current;
+    const radiusInherit = radius.inherit;
+
+    return (
+      <div className={className}>
+        <div className="vs-style-border-setter-left-pane">
+          <div className="vs-style-border-setter-row">
+            <div
+              onClick={this.changeSelectedRadius.bind(this, 'border-top-left')}
+              className={
+                this.state.currentSelected === 'border-top-left' ? 'vs-style-border-selected' : ''
+              }
+            >
+              <span data-tip={$i18n.get({ id: 'styleUpperLeftCorner', dm: '左上角' })}>┏</span>
+            </div>
+            <div
+              onClick={this.changeSelectedRadius.bind(this, 'border-bottom-left')}
+              className={
+                this.state.currentSelected === 'border-bottom-left'
+                  ? 'vs-style-border-selected'
+                  : ''
+              }
+            >
+              <span data-tip={$i18n.get({ id: 'styleBottomRightCorner', dm: '右下角' })}>┗</span>
+            </div>
+          </div>
+          <div className="vs-style-border-setter-row">
+            <div
+              onClick={this.changeSelectedRadius.bind(this, 'border')}
+              className={this.state.currentSelected === 'border' ? 'vs-style-border-selected' : ''}
+            >
+              <span data-tip={$i18n.get({ id: 'styleAll', dm: '全部' })}>╋</span>
+            </div>
+          </div>
+          <div className="vs-style-border-setter-row">
+            <div
+              onClick={this.changeSelectedRadius.bind(this, 'border-top-right')}
+              className={
+                this.state.currentSelected === 'border-top-right' ? 'vs-style-border-selected' : ''
+              }
+            >
+              <span data-tip={$i18n.get({ id: 'styleUpperRightCorner', dm: '右上角' })}>┓</span>
+            </div>
+            <div
+              onClick={this.changeSelectedRadius.bind(this, 'border-bottom-right')}
+              className={
+                this.state.currentSelected === 'border-bottom-right'
+                  ? 'vs-style-border-selected'
+                  : ''
+              }
+            >
+              <span data-tip={$i18n.get({ id: 'styleBottomRightCorner', dm: '右下角' })}>┛</span>
+            </div>
+          </div>
+        </div>
+        <div className="vs-style-border-setter-right-pane">
+          <Field
+            display="inline"
+            title={$i18n.get({ id: 'styleFillet', dm: '圆角' })}
+            compact
+            highlight={utils.getCurrentPropertyHighlight(this.props, 'border-radius')}
+          >
+            <NumberControl
+              key={this.state.currentSelected}
+              placeholder={radiusInherit}
+              onChange={(val) => {
+                this.setValue(val, this.props);
+              }}
+              value={radiusCurrent || null}
+              min={0}
+              units={[
+                {
+                  type: 'px',
+                  list: true,
+                },
+                {
+                  type: '%',
+                  list: true,
+                },
+                {
+                  type: 'em',
+                  list: true,
+                },
+              ]}
+            />
+          </Field>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default RadiusStyle;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/border/radiusParser.js b/packages/editor-setters/src/style-setter/lc-style-setter/border/radiusParser.js
new file mode 100644
index 000000000..cad6b8a17
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/border/radiusParser.js
@@ -0,0 +1,54 @@
+import compose from 'lodash.flow';
+import curry from 'lodash.curry';
+import { getRelatedRules } from './borderParser';
+import utils from '../utils';
+const keys = Object.keys;
+const getRadiusEmptyState = () => ({
+  tl: null,
+  tr: null,
+  bl: null,
+  br: null,
+});
+
+const stateMutator = {
+  'border-radius': (s, r) => keys(s).forEach(k => { s[k] = r; }),
+  'border-top-left-radius': (s, r) => { s.tl = r; },
+  'border-top-right-radius': (s, r) => { s.tr = r; },
+  'border-bottom-left-radius': (s, r) => { s.bl = r; },
+  'border-bottom-right-radius': (s, r) => { s.br = r; },
+};
+
+const mapStateToCurrentValue = (state, type) => {
+  switch (type) {
+    case 'border-radius':
+      return keys(state).every(k => state[k] === state.tl) ? state.tl : null;
+    case 'border-top-left-radius':
+      return state.tl;
+    case 'border-top-right-radius':
+      return state.tr;
+    case 'border-bottom-left-radius':
+      return state.bl;
+    case 'border-bottom-right-radius':
+      return state.br;
+    default:
+      break;
+  }
+  return null;
+};
+
+const parseToRadius = curry((type, mapfn, rules) => {
+  const ruleState = Object.assign({}, getRadiusEmptyState());
+  rules.forEach(rule => stateMutator[rule[0]](ruleState, rule[1]));
+  return mapfn(ruleState, type);
+});
+
+export default function radiusParser(props, state) {
+  const rules = props.value || props.defaultValue || {};
+  const current = compose(
+    getRelatedRules,
+    parseToRadius(state, mapStateToCurrentValue)
+  )(rules, stateMutator);
+  const inherit = utils.getInheritPropertyValue(
+    rules, state, props.node);
+  return { current, inherit, value: utils.notEmptyValue(current, inherit) };
+}
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/effects/cursor.js b/packages/editor-setters/src/style-setter/lc-style-setter/effects/cursor.js
new file mode 100644
index 000000000..9ec1bb1d5
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/effects/cursor.js
@@ -0,0 +1,46 @@
+import React, { Component, PropTypes } from 'react';
+import classNames from 'classnames';
+import SelectControl from '@ali/ve-select-control';
+import Icons from '@ali/ve-icons';
+import utils from '../utils';
+const CURSOR_TYPE = ['default', 'pointer'];
+
+class Cursor extends Component {
+  static propTypes = {
+    prop: PropTypes.object,
+    className: PropTypes.string,
+  };
+
+  static displayName = 'StyleOpacitySetter';
+  static transducer = utils.transducer;
+
+  componentWillMount() {
+
+  }
+
+  componentWillUnmount() {
+
+  }
+
+  render() {
+    const className = classNames('vs-style-cursor', this.props.className);
+    const cursor = utils.getPropertyValue(this.props, 'cursor');
+    const options = CURSOR_TYPE.map((item, index) => ({
+      text: <div key={index}><Icons name={`style.cursor-${item}`} size="small" />{item}</div>,
+      value: item,
+    }));
+    return (
+      <SelectControl
+        className={className}
+        value={cursor.value}
+        options={options}
+        onChange={(val) => utils.setPropertyValue(this.props, 'cursor', val)}
+        min={0}
+        max={100}
+        syncTargetWidth
+      />
+    );
+  }
+}
+
+export default Cursor;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/effects/index.js b/packages/editor-setters/src/style-setter/lc-style-setter/effects/index.js
new file mode 100644
index 000000000..2a90c53ce
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/effects/index.js
@@ -0,0 +1,67 @@
+import React, { Component, PropTypes } from 'react';
+import classNames from 'classnames';
+import Icons from '@ali/ve-icons';
+import Field from '@ali/ve-field';
+import Opacity from './opacity';
+import Cursor from './cursor';
+import Shadow from './shadow';
+
+import utils from '../utils';
+import $i18n from '../i18n/index';
+
+class Effects extends Component {
+  static propTypes = {
+    prop: PropTypes.object,
+    className: PropTypes.string,
+  };
+
+  static displayName = 'StyleEffectsSetter';
+
+  static transducer = utils.transducer;
+
+  componentWillMount() {
+
+  }
+
+  // shouldComponentUpdate() {
+  //   return false;
+  // }
+
+  componentWillUnmount() {
+
+  }
+
+  render() {
+    const className = classNames('vs-style-effects', this.props.className);
+
+    return (
+      <div className={className}>
+        <Field
+          display="inline"
+          highlight={utils.getCurrentPropertyHighlight(this.props, 'opacity')}
+          title={(
+<span data-tip={$i18n.get({ id: 'styleTransparency', dm: '透明度' })}>
+              <Icons name="style.opacity" size="medium" />
+</span>
+)}
+        >
+          <Opacity {...this.props} />
+        </Field>
+        <Field
+          display="inline"
+          highlight={utils.getCurrentPropertyHighlight(this.props, 'cursor')}
+          title={(
+<span data-tip={$i18n.get({ id: 'styleMouseGesture', dm: '鼠标手势' })}>
+              <Icons name="style.cursor" size="small" />
+</span>
+)}
+        >
+          <Cursor {...this.props} />
+        </Field>
+        <Shadow {...this.props} />
+      </div>
+    );
+  }
+}
+
+export default Effects;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/effects/opacity.js b/packages/editor-setters/src/style-setter/lc-style-setter/effects/opacity.js
new file mode 100644
index 000000000..f4e9b3ec4
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/effects/opacity.js
@@ -0,0 +1,47 @@
+import React, { Component, PropTypes } from 'react';
+import classNames from 'classnames';
+import NumberControl from '@ali/ve-number-control';
+import utils from '../utils';
+class Opacity extends Component {
+  static propTypes = {
+    prop: PropTypes.object,
+    className: PropTypes.string,
+  };
+
+  static displayName = 'StyleOpacitySetter';
+  static transducer = utils.transducer;
+
+  componentWillMount() {
+
+  }
+
+  componentWillUnmount() {
+
+  }
+
+  render() {
+    const className = classNames('vs-style-opacity', this.props.className);
+    const opacity = utils.getPropertyValue(this.props, 'opacity');
+    const getFloat = v => parseFloat(v).toFixed(2);
+    const current = opacity.current ? `${parseInt(opacity.current * 100, 10)}%` : null;
+    return (
+      <NumberControl
+        className={className}
+        placeholder={`${getFloat(opacity.inherit) * 100}%`}
+        value={current}
+        onChange={(val) => {
+          const value = (parseFloat((val.split('%')[0])) / 100).toFixed(2);
+          utils.setPropertyValue(this.props, 'opacity', value);
+        }}
+        min={0}
+        max={100}
+        units={[{
+          type: '%',
+          list: true,
+        }]}
+      />
+    );
+  }
+}
+
+export default Opacity;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/effects/shadow.js b/packages/editor-setters/src/style-setter/lc-style-setter/effects/shadow.js
new file mode 100644
index 000000000..775d5c3c4
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/effects/shadow.js
@@ -0,0 +1,210 @@
+import React, { Component, PropTypes } from 'react';
+import classNames from 'classnames';
+import Field from '@ali/ve-field';
+import Icons from '@ali/ve-icons';
+import NumberControl from '@ali/ve-number-control';
+import ColorControl from '@ali/ve-color-control';
+
+import utils from '../utils';
+import $i18n from '../i18n/index';
+
+const generateShadow = (c = 'rgba(0,0,0,0)', x = '0', y = '0', b = '0', s = '0') => `${c} ${x} ${y} ${b} ${s}`;
+
+class Shadow extends Component {
+  static propTypes = {
+    prop: PropTypes.object,
+    className: PropTypes.string,
+  };
+
+  static displayName = 'StyleShadowSetter';
+
+  static transducer = utils.transducer;
+
+  componentWillMount() {
+
+  }
+
+  componentWillUnmount() {
+
+  }
+
+  render() {
+    const className = classNames('vs-style-shadow', this.props.className);
+    const shadow = utils.getPropertyValue(this.props, 'box-shadow').value;
+
+    let c = ''; // color
+    let x = ''; // x
+    let y = ''; // y
+    let b = ''; // blur
+    let s = ''; // spread
+
+    // @todo shadow parser 比较复杂考虑情况比较多，这里有明显的 Bug
+    // 由于时间问题，这里先留坑，满足可用性，后面有时间再来修复一下。
+    if (shadow !== 'none' && !!shadow && typeof shadow === 'string') {
+      const res = shadow.split(' ');
+      s = res.pop();
+      b = res.pop();
+      y = res.pop();
+      x = res.pop();
+      c = res.join(' ');
+    }
+
+    return (
+      <div>
+        <div className="ve-style-box-shadow-select">
+          <Field
+            display="inline"
+            highlight={utils.getCurrentPropertyHighlight(this.props, 'box-shadow')}
+            title={(
+<span data-tip={$i18n.get({ id: 'styleColour', dm: '颜色' })}>
+                <Icons name="style.fill" size="medium" />
+</span>
+)}
+          >
+            <ColorControl
+              value={c}
+              placeholder="#000"
+              onChange={(val) => {
+                utils.setPropertyValue(this.props, 'box-shadow', generateShadow(val, x, y, b, s));
+              }}
+            />
+          </Field>
+        </div>
+        <div className="ve-style-box-shadow-select">
+          <Field
+            display="inline"
+            highlight={utils.getCurrentPropertyHighlight(this.props, 'box-shadow')}
+            title="X"
+          >
+            <NumberControl
+              className={className}
+              value={x}
+              placeholder="0"
+              onChange={(val) => {
+                utils.setPropertyValue(this.props, 'box-shadow', generateShadow(c, val, y, b, s));
+              }}
+              min={0}
+              max={100}
+              units={[
+                {
+                  type: 'px',
+                  list: true,
+                },
+                {
+                  type: '%',
+                  list: true,
+                },
+                {
+                  type: 'em',
+                  list: true,
+                },
+              ]}
+            />
+          </Field>
+          <Field
+            display="inline"
+            highlight={utils.getCurrentPropertyHighlight(this.props, 'box-shadow')}
+            title="Y"
+          >
+            <NumberControl
+              className={className}
+              placeholder="0"
+              value={y}
+              onChange={(val) => {
+                utils.setPropertyValue(this.props, 'box-shadow', generateShadow(c, x, val, b, s));
+              }}
+              min={0}
+              max={100}
+              units={[
+                {
+                  type: 'px',
+                  list: true,
+                },
+                {
+                  type: '%',
+                  list: true,
+                },
+                {
+                  type: 'em',
+                  list: true,
+                },
+              ]}
+            />
+          </Field>
+        </div>
+        <div className="ve-style-box-shadow-select">
+          <Field
+            display="inline"
+            highlight={utils.getCurrentPropertyHighlight(this.props, 'box-shadow')}
+            title={(
+<span data-tip="blur">
+                <Icons name="style.blur" size="medium" />
+</span>
+)}
+          >
+            <NumberControl
+              className={className}
+              placeholder="0"
+              value={b}
+              onChange={(val) => {
+                utils.setPropertyValue(this.props, 'box-shadow', generateShadow(c, x, y, val, s));
+              }}
+              min={0}
+              max={100}
+              units={[
+                {
+                  type: 'px',
+                  list: true,
+                },
+                {
+                  type: '%',
+                  list: true,
+                },
+                {
+                  type: 'em',
+                  list: true,
+                },
+              ]}
+            />
+          </Field>
+          <Field
+            display="inline"
+            highlight={utils.getCurrentPropertyHighlight(this.props, 'box-shadow')}
+            title={(
+<span data-tip="spread">
+                <Icons name="style.layer" size="small" />
+</span>
+)}
+          >
+            <NumberControl
+              value={s}
+              placeholder="0"
+              className={className}
+              onChange={(val) => {
+                utils.setPropertyValue(this.props, 'box-shadow', generateShadow(c, x, y, b, val));
+              }}
+              min={0}
+              max={100}
+              units={[
+                {
+                  type: 'px',
+                  list: true,
+                },
+                {
+                  type: '%',
+                  list: true,
+                },
+                {
+                  type: 'em',
+                  list: true,
+                },
+              ]}
+            />
+          </Field>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Shadow;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/i18n/index.js b/packages/editor-setters/src/style-setter/lc-style-setter/i18n/index.js
new file mode 100644
index 000000000..ed0ccb71e
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/i18n/index.js
@@ -0,0 +1,45 @@
+const { provideIntl, destroyIntl } = require('@ali/intl-universal');
+const strings = require('./strings');
+
+let intl;
+const MEDUSA_APP_NAME = 'legao-designer';
+const PSEUDO_LANGUAGE_TAG = 'pd-KV';
+const CURRENT_LANGUAGE = (window.locale || window.localStorage.getItem('vdev-locale') || '').replace(/_/, '-') || 'zh-CN';
+
+function update(language) {
+  destroyIntl();
+  intl = provideIntl({
+    locale: language,
+    messagesAIO: strings,
+  });
+}
+
+function get(id, variable) {
+  if (!intl) update();
+  let string = '';
+  let key = '';
+  if (typeof id === 'string') {
+    key = id;
+    string = intl.formatMessage({ id }, variable);
+  }
+  if (typeof id === 'object' && id.dm) {
+    id.defaultMessage = id.dm;
+  }
+  key = id.id;
+  string = intl.formatMessage(id, variable);
+  if (CURRENT_LANGUAGE === PSEUDO_LANGUAGE_TAG) {
+    return `##@@@${key}##${MEDUSA_APP_NAME}@@@##${string}`;
+  }
+  return string;
+}
+
+if (PSEUDO_LANGUAGE_TAG === CURRENT_LANGUAGE) {
+  update('en-US');
+} else {
+  update(CURRENT_LANGUAGE);
+}
+
+module.exports = {
+  get,
+  update,
+};
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/i18n/strings/en-US.json b/packages/editor-setters/src/style-setter/lc-style-setter/i18n/strings/en-US.json
new file mode 100644
index 000000000..03a69fdf0
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/i18n/strings/en-US.json
@@ -0,0 +1,72 @@
+{
+  "styleImpactBlackBody": "Impact, black body",
+  "styleImpactMicrosoftYahei": "Impact, Microsoft Yahei",
+  "styleComicSansMSBlackbody": "Comic Sans MS, Blackbody",
+  "styleGeorgiaMicrosoftYahei": "Georgia, Microsoft Yahei",
+  "styleArialHelveticaBlackBody": "Arial, Helvetica, black body",
+  "styleLateralOffset": "Horizontal offset",
+  "styleAlign": "text-align",
+  "styleTrebuchetMSMicrosoftYahei": "Trebuchet MS, Microsoft Yahei",
+  "styleTrebuchetMSBlackBody": "Trebuchet MS, black body",
+  "styleArialHelveticaMicrosoftYahei": "Arial, Helvetica, Microsoft Yahei",
+  "styleLucidaSansUnicodeMicrosoft": "Lucida Sans Unicode, Microsoft Yahei",
+  "styleRowHeight": "line-height",
+  "styleFontColor": "font-color",
+  "styleSolidLine": "solid line",
+  "styleLinear": "style",
+  "styleLucidaConsoleBlackbody": "Lucida Console, Blackbody",
+  "styleStyle": "font-style",
+  "styleWordWeight": "font-width",
+  "styleLayout": "layout",
+  "styleSourceEditor": "Source editor",
+  "styleTopBorder": "Top border",
+  "styleStatus": "status",
+  "styleText": "Text",
+  "stylePleaseEnterAnAddress": "Please enter an address or paste upload",
+  "styleDefaultState": "Default state",
+  "styleRightBorder": "Right border",
+  "styleHigh": "high",
+  "styleBottomBorder": "Bottom border",
+  "styleTransparency": "opacity",
+  "styleBottomRightCorner": "Bottom right corner",
+  "styleUpperRightCorner": "Upper right corner",
+  "styleColour": "color",
+  "styleUnsupportedImage": "Unsupported image",
+  "styleTimesNewRomanBlackbody": "Times New Roman, Blackbody",
+  "styleLucidaConsoleMicrosoftYahei": "Lucida Console, Microsoft Yahei",
+  "styleDisplay": "display",
+  "styleFlexibleLayout": "Flexible layout",
+  "styleSize": "font-size",
+  "styleFillet": "radius",
+  "styleEffect": "effect",
+  "stylePositioning": "Positioning",
+  "styleLeftBorder": "Left border",
+  "styleBackground": "background",
+  "styleFillColor": "background-color",
+  "stylePalatinoLinotypeBlackBody": "Palatino Linotype, black body",
+  "styleFont": "font-family",
+  "styleMouseGesture": "cursor",
+  "styleAir": "empty",
+  "styleAll": "All",
+  "styleTimesNewRomanMicrosoft": "Times New Roman, Microsoft Yahei",
+  "styleUpperLeftCorner": "Upper left corner",
+  "styleCourierNewMicrosoftYahei": "Courier New, Microsoft Yahei",
+  "styleCourierNewBlackbody": "Courier New, Blackbody",
+  "styleFrame": "Border",
+  "styleImage": "background-image",
+  "styleComicSansMSMicrosoft": "Comic Sans MS, Microsoft Yahei",
+  "styleVerdanaBlackBody": "Verdana, black body",
+  "stylePalatinoLinotypeMicrosoftYahei": "Palatino Linotype, Microsoft Yahei",
+  "styleGeorgiaBlackbody": "Georgia, Blackbody",
+  "styleWidth": "width",
+  "styleVerticalOffset": "Vertical offset",
+  "styleModification": "text-decoration",
+  "styleHeight": "height",
+  "styleFixed": "fixed",
+  "styleLucidaSansUnicodeBlackbody": "Lucida Sans Unicode, Blackbody",
+  "styleVerdanaMicrosoftYahei": "Verdana, Microsoft Yahei",
+  "styleNo": "no",
+  "styleTile": "Tile",
+  "styleDottedLine": "dotted line",
+  "styleDottedLine.1": "dashed line"
+}
\ No newline at end of file
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/i18n/strings/index.js b/packages/editor-setters/src/style-setter/lc-style-setter/i18n/strings/index.js
new file mode 100644
index 000000000..9b61c93e1
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/i18n/strings/index.js
@@ -0,0 +1,4 @@
+module.exports = {
+  'en-US': require('./en-US.json'),
+  'zh-CN': require('./zh-CN.json'),
+};
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/i18n/strings/zh-CN.json b/packages/editor-setters/src/style-setter/lc-style-setter/i18n/strings/zh-CN.json
new file mode 100644
index 000000000..599c944f8
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/i18n/strings/zh-CN.json
@@ -0,0 +1,72 @@
+{
+  "styleAir": "空",
+  "stylePalatinoLinotypeMicrosoftYahei": "Palatino Linotype, 微软雅黑",
+  "styleMouseGesture": "鼠标手势",
+  "styleAll": "全部",
+  "styleImpactBlackBody": "Impact, 黑体",
+  "styleFont": "字体",
+  "styleFrame": "边框",
+  "styleImage": "图片",
+  "styleRowHeight": "行高",
+  "styleArialHelveticaMicrosoftYahei": "Arial, Helvetica, 微软雅黑",
+  "styleUpperLeftCorner": "左上角",
+  "styleCourierNewMicrosoftYahei": "Courier New, 微软雅黑",
+  "styleTimesNewRomanMicrosoft": "Times New Roman, 微软雅黑",
+  "styleFixed": "固定",
+  "styleModification": "修饰",
+  "stylePleaseEnterAnAddress": "请输入地址或粘贴上传",
+  "styleText": "文字",
+  "styleVerticalOffset": "纵向偏移",
+  "styleComicSansMSMicrosoft": "Comic Sans MS, 微软雅黑",
+  "styleLinear": "线形",
+  "styleWidth": "宽",
+  "styleVerdanaBlackBody": "Verdana, 黑体",
+  "styleGeorgiaBlackbody": "Georgia, 黑体",
+  "styleTrebuchetMSBlackBody": "Trebuchet MS, 黑体",
+  "styleFillet": "圆角",
+  "styleFlexibleLayout": "弹性布局",
+  "styleDottedLine": "点线",
+  "styleLeftBorder": "左边框",
+  "styleNo": "无",
+  "styleLucidaSansUnicodeBlackbody": "Lucida Sans Unicode, 黑体",
+  "styleLucidaConsoleMicrosoftYahei": "Lucida Console, 微软雅黑",
+  "styleSize": "大小",
+  "styleLateralOffset": "横向偏移",
+  "styleAlign": "对齐",
+  "styleImpactMicrosoftYahei": "Impact, 微软雅黑",
+  "styleArialHelveticaBlackBody": "Arial, Helvetica, 黑体",
+  "styleComicSansMSBlackbody": "Comic Sans MS, 黑体",
+  "stylePalatinoLinotypeBlackBody": "Palatino Linotype, 黑体",
+  "styleGeorgiaMicrosoftYahei": "Georgia, 微软雅黑",
+  "styleDefaultState": "默认状态",
+  "styleFontColor": "字体颜色",
+  "styleSolidLine": "实线",
+  "styleTrebuchetMSMicrosoftYahei": "Trebuchet MS, 微软雅黑",
+  "styleLucidaSansUnicodeMicrosoft": "Lucida Sans Unicode, 微软雅黑",
+  "styleStyle": "样式",
+  "styleTransparency": "透明度",
+  "styleSourceEditor": "源码编辑",
+  "styleStatus": "状态",
+  "styleHigh": "高",
+  "styleTopBorder": "上边框",
+  "styleBottomBorder": "下边框",
+  "styleRightBorder": "右边框",
+  "styleHeight": "高度",
+  "styleLayout": "布局",
+  "styleUnsupportedImage": "暂未支持的图片",
+  "styleLucidaConsoleBlackbody": "Lucida Console, 黑体",
+  "styleWordWeight": "字重",
+  "styleCourierNewBlackbody": "Courier New, 黑体",
+  "styleFillColor": "填充色",
+  "styleTile": "平铺",
+  "styleBackground": "背景",
+  "stylePositioning": "定位",
+  "styleEffect": "效果",
+  "styleBottomRightCorner": "右下角",
+  "styleDottedLine.1": "虚线",
+  "styleColour": "颜色",
+  "styleTimesNewRomanBlackbody": "Times New Roman, 黑体",
+  "styleUpperRightCorner": "右上角",
+  "styleVerdanaMicrosoftYahei": "Verdana, 微软雅黑",
+  "styleDisplay": "显示"
+}
\ No newline at end of file
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/index.js b/packages/editor-setters/src/style-setter/lc-style-setter/index.js
new file mode 100644
index 000000000..7eb21f3ae
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/index.js
@@ -0,0 +1,117 @@
+import React, { Component, PropTypes } from 'react';
+import classNames from 'classnames';
+import Field from '@ali/ve-field';
+import { registerDict } from '@ali/ve-icons';
+import { normalizeStyle } from '@ali/vu-css-style';
+
+import Layout from './layout';
+import Typography from './typography';
+import Background from './background';
+import Border from './border';
+import Effects from './effects';
+
+import utils from './utils';
+import SvgLib from './svglib';
+import './style.less';
+import $i18n from './i18n/index';
+
+registerDict('style', SvgLib);
+
+/**
+ * state
+ * json: JSON模式
+ * ----
+ * layout
+ *   display
+ *     flexItem
+ *   padding+margin
+ *   size
+ *     width
+ *     height
+ *   min+max advanced
+ *   float advanced
+ *   clear advanced
+ *   overflow advanced
+ *   position advanced
+ * background
+ *   color
+ *   image
+ * border
+ *   border
+ *   radius
+ * typography
+ *   font-family
+ *   color
+ *   font-size
+ *   text-align
+ *   line-height
+ *   font-weight
+ *   text-decoration
+ *   font-style
+ *   letter-spacing advanced
+ *   text-indent advanced
+ *   text-transform advanced
+ *   direction advanced
+ * effects
+ *   opacity
+ *   cursor
+ * svg
+ *   fill
+ */
+
+class StyleSetter extends Component {
+  static propTypes = {
+    prop: PropTypes.object,
+    className: PropTypes.string,
+  };
+
+  static displayName = 'StyleSetter';
+
+  static transducer = utils.transducer;
+
+  static defaultProps = {
+
+  };
+
+  render() {
+    const className = classNames(
+      'vs-style',
+      'vs-style-advanced',
+      this.props.className,
+    );
+    // react style -> css style
+    const value = this.props.value ? normalizeStyle(this.props.value) : null;
+    const defaultValue = this.props.defaultValue ? normalizeStyle(this.props.defaultValue) : null;
+    const props = {...this.props, value, defaultValue};
+
+    return (
+      <div className={className}>
+        <Field display="accordion" title={$i18n.get({ id: 'styleLayout', dm: '布局' })}>
+          <Layout {...props} />
+        </Field>
+        <Field display="accordion" title={$i18n.get({ id: 'styleText', dm: '文字' })}>
+          <Typography {...props} />
+        </Field>
+        <Field display="accordion" title={$i18n.get({ id: 'styleBackground', dm: '背景' })}>
+          <Background {...props} />
+        </Field>
+        <Field display="accordion" title={$i18n.get({ id: 'styleFrame', dm: '边框' })}>
+          <Border {...props} />
+        </Field>
+        <Field display="accordion" title={$i18n.get({ id: 'styleEffect', dm: '效果' })}>
+          <Effects {...props} />
+        </Field>
+      </div>
+    );
+  }
+}
+
+StyleSetter.Layout = Layout;
+StyleSetter.Typography = Typography;
+StyleSetter.Background = Background;
+StyleSetter.Effects = Effects;
+StyleSetter.Border = Border;
+
+// StyleSetter.Svg = Svg;
+
+export default StyleSetter;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/layout/display.js b/packages/editor-setters/src/style-setter/lc-style-setter/layout/display.js
new file mode 100644
index 000000000..464abdf23
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/layout/display.js
@@ -0,0 +1,44 @@
+import React, { Component, PropTypes } from 'react';
+import classNames from 'classnames';
+import ChoiceControl from '@ali/ve-choice-control';
+import Icons from '@ali/ve-icons';
+import utils from '../utils';
+class Display extends Component {
+  static propTypes = {
+    prop: PropTypes.object,
+    className: PropTypes.string,
+  };
+
+  static displayName = 'StyleLayoutDisplaySetter';
+
+  render() {
+    const display = utils.getPropertyValue(this.props, 'display').value;
+    return (
+      <ChoiceControl
+        className="vs-style-layout-diplay"
+        value={display}
+        options={[{
+          title: <Icons name="style.block" size="medium" />,
+          value: 'block',
+        }, {
+          title: <Icons name="style.inline-block" size="medium" />,
+          value: 'inline-block',
+        }, {
+          title: <Icons name="style.inline" size="medium" />,
+          value: 'inline',
+        }, {
+          title: <Icons name="style.flex" size="medium" />,
+          value: 'flex',
+        },
+        // {
+        //   title: <Icons name="hidden" size="medium" />,
+        //   value: 'none',
+        // }
+        ]}
+        onChange={val => utils.setPropertyValue(this.props, 'display', val)}
+      />
+    );
+  }
+}
+
+export default Display;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/layout/flex.js b/packages/editor-setters/src/style-setter/lc-style-setter/layout/flex.js
new file mode 100644
index 000000000..3e3e3addc
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/layout/flex.js
@@ -0,0 +1,176 @@
+import React, { Component, PropTypes } from 'react';
+import ChoiceControl from '@ali/ve-choice-control';
+import Icons from '@ali/ve-icons';
+import Field from '@ali/ve-field';
+import utils from '../utils';
+class Flex extends Component {
+  static propTypes = {
+    prop: PropTypes.object,
+  };
+
+  static displayName = 'StyleLayoutFlexSetter';
+
+  render() {
+    // flex-direction
+    const direction = utils.getPropertyValue(this.props, 'flex-direction').value;
+    // align-items
+    const align = utils.getPropertyValue(this.props, 'align-items').value;
+    // justify-content
+    const justify = utils.getPropertyValue(this.props, 'justify-content').value;
+    /*
+    // flex-warp
+    const wrap = getPropertyValue(this.props, 'flex-wrap').value;
+    const isWrap = /^wrap/.test(wrap);
+    // align-content
+    const alignColumns = getPropertyValue(this.props, 'align-content').value;
+    */
+
+    const isVertical = /^column/.test(direction);
+    const v = isVertical ? '-v' : '';
+    const reverseClass = /reverse$/.test(direction)
+      ? `vs-style-reverse${isVertical ? '-v' : '-h'}` : null;
+
+    return (
+      <div className="vs-style-layout-flex">
+        <ChoiceControl
+          className="vs-style-flex-property"
+          value={direction}
+          options={[{
+            title: <Icons name="style.direction-row" size="medium" />,
+            tip: 'Direction:row',
+            value: 'row',
+          }, {
+            title: <Icons name="style.direction-column" size="medium" />,
+            tip: 'Direction:column',
+            value: 'column',
+          }, {
+            title: <Icons name="style.direction-row" className="vs-style-reverse-h" size="medium" />,
+            tip: 'Direction:row-reverse',
+            value: 'row-reverse',
+          }, {
+            title: (<Icons
+              name="style.direction-column" className="vs-style-reverse-v" size="medium"
+            />),
+            tip: 'Direction:column-reverse',
+            value: 'column-reverse',
+          }]}
+          onChange={(val) => utils.setPropertyValue(this.props, 'flex-direction', val)}
+        />
+        <ChoiceControl
+          className="vs-style-flex-property"
+          value={align}
+          options={[{
+            title: (
+              <Icons
+                className={reverseClass}
+                name={`style.align-start${v}`}
+                size="medium"
+              />
+            ),
+            tip: 'Align:flex-start',
+            value: 'flex-start',
+          }, {
+            title: (
+              <Icons
+                className={reverseClass}
+                name={`style.align-center${v}`}
+                size="medium"
+              />
+            ),
+            tip: 'Align:center',
+            value: 'center',
+          }, {
+            title: (
+              <Icons
+                className={reverseClass}
+                name={`style.align-end${v}`}
+                size="medium"
+              />
+            ),
+            tip: 'Align:flex-end',
+            value: 'flex-end',
+          }, {
+            title: (
+              <Icons
+                className={reverseClass}
+                name={`style.align-stretch${v}`}
+                size="medium"
+              />
+            ),
+            tip: 'Align:stretch',
+            value: 'stretch',
+          }, {
+            title: (
+              <Icons
+                className={reverseClass}
+                name={`style.align-baseline${v}`}
+                size="medium"
+              />
+            ),
+            tip: 'Align:baseline',
+            value: 'baseline',
+          }]}
+          onChange={(val) => utils.setPropertyValue(this.props, 'align-items', val)}
+        />
+        <ChoiceControl
+          className="vs-style-flex-property"
+          value={justify}
+          options={[{
+            title: (
+              <Icons
+                className={reverseClass}
+                name={`style.justify-start${v}`}
+                size="medium"
+              />
+            ),
+            tip: 'Justify:flex-start',
+            value: 'flex-start',
+          }, {
+            title: (
+              <Icons
+                className={reverseClass}
+                name={`style.justify-center${v}`}
+                size="medium"
+              />
+            ),
+            tip: 'Justify:center',
+            value: 'center',
+          }, {
+            title: (
+              <Icons
+                className={reverseClass}
+                name={`style.justify-end${v}`}
+                size="medium"
+              />
+            ),
+            tip: 'Justify:flex-end',
+            value: 'flex-end',
+          }, {
+            title: (
+              <Icons
+                className={reverseClass}
+                name={`style.justify-between${v}`}
+                size="medium"
+              />
+            ),
+            tip: 'Justify:space-between',
+            value: 'space-between',
+          }, {
+            title: (
+              <Icons
+                className={reverseClass}
+                name={`style.justify-around${v}`}
+                size="medium"
+              />
+            ),
+            tip: 'Justify:space-around',
+            value: 'space-around',
+          }]}
+          onChange={(val) => utils.setPropertyValue(this.props, 'justify-content', val)}
+        />
+      </div>
+    );
+  }
+}
+
+export default Flex;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/layout/flexitem.js b/packages/editor-setters/src/style-setter/lc-style-setter/layout/flexitem.js
new file mode 100644
index 000000000..0a432e05f
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/layout/flexitem.js
@@ -0,0 +1,10 @@
+import React, { Component, PropTypes } from 'react';
+import classNames from 'classnames';
+
+class FlexItem extends Component {
+  render() {
+    return null;
+  }
+}
+
+export default FlexItem;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/layout/height.js b/packages/editor-setters/src/style-setter/lc-style-setter/layout/height.js
new file mode 100644
index 000000000..26e0afa45
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/layout/height.js
@@ -0,0 +1,19 @@
+import React, { Component, PropTypes } from 'react';
+import Size from './size';
+import utils from '../utils';
+class Height extends Component {
+  static propTypes = {
+    prop: PropTypes.object,
+    className: PropTypes.string,
+  };
+
+  static displayName = 'StyleLayoutWidthSetter';
+
+  static transducer = utils.transducer;
+
+  render() {
+    return <Size {...this.props} field="height" />;
+  }
+}
+
+export default Height;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/layout/index.js b/packages/editor-setters/src/style-setter/lc-style-setter/layout/index.js
new file mode 100644
index 000000000..4a32635ca
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/layout/index.js
@@ -0,0 +1,107 @@
+import React, { Component, PropTypes } from 'react';
+import classNames from 'classnames';
+import Field from '@ali/ve-field';
+import Display from './display';
+import Flex from './flex';
+import FlexItem from './flexitem';
+import PaddingMargin from './padding+margin';
+import Width from './width';
+import Height from './height';
+import Position from './position'; // advanced
+import utils from '../utils';
+import $i18n from '../i18n/index';
+
+function inFlexBox(node) {
+  const nativeNode = node;
+  if (!nativeNode) return false;
+  const { parentNode } = nativeNode;
+  if (!parentNode) return false;
+  const display = window.getComputedStyle(parentNode).getPropertyValue('display');
+  return /flex/.test(display);
+}
+
+function isFlexBox(props) {
+  const display = utils.getPropertyValue(props, 'display').value;
+  return /flex$/.test(display);
+}
+
+class Layout extends Component {
+  static propTypes = {
+    prop: PropTypes.object,
+    className: PropTypes.string,
+  };
+
+  static displayName = 'StyleLayoutSetter';
+
+  componentWillMount() {
+
+  }
+
+  // shouldComponentUpdate() {
+  //   return false;
+  // }
+
+  componentWillUnmount() {
+
+  }
+
+  render() {
+    const className = classNames('vs-style-layout', this.props.className);
+    const aFlexBox = isFlexBox(this.props);
+    const aFlexItem = inFlexBox(this.props.node);
+
+    return (
+      <div className={className}>
+        <Field
+          display="inline"
+          title={$i18n.get({ id: 'styleDisplay', dm: '显示' })}
+          className="vs-field-display"
+          compact
+          highlight={utils.getCurrentPropertyHighlight(this.props, 'display')}
+        >
+          <Display {...this.props} />
+        </Field>
+        {aFlexBox && (
+          <Field
+            display="caption"
+            className="vs-field-flex"
+            title={$i18n.get({ id: 'styleFlexibleLayout', dm: '弹性布局' })}
+          >
+            <Flex {...this.props} />
+          </Field>
+        )}
+        {/* todo: aFlexItem && <Field display="caption" title="Flex Item">
+           <FlexItem />
+          </Field> */}
+        <Field display="plain">
+          <PaddingMargin {...this.props} />
+        </Field>
+        <Field display="plain" className="vs-flex-field">
+          <Field
+            display="inline"
+            title={$i18n.get({ id: 'styleWidth', dm: '宽' })}
+            compact
+            highlight={utils.getCurrentPropertyHighlight(this.props, 'width')}
+          >
+            <Width {...this.props} />
+          </Field>
+          <Field
+            display="inline"
+            title={$i18n.get({ id: 'styleHigh', dm: '高' })}
+            compact
+            highlight={utils.getCurrentPropertyHighlight(this.props, 'height')}
+          >
+            <Height {...this.props} />
+          </Field>
+        </Field>
+        {/* todo:
+          {advanced && <Field display="inline" title="Position">
+           <Position />
+          </Field>}
+          */}
+      </div>
+    );
+  }
+}
+
+export default Layout;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/layout/padding+margin.js b/packages/editor-setters/src/style-setter/lc-style-setter/layout/padding+margin.js
new file mode 100644
index 000000000..a1d4a7b34
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/layout/padding+margin.js
@@ -0,0 +1,504 @@
+import React, { Component, PropTypes } from 'react';
+import classNames from 'classnames';
+import Icons, { Button } from '@ali/ve-icons';
+import utils from '../utils';
+import $i18n from '../i18n/index';
+
+function diplayValue(value) {
+  if (utils.isEmptyCssValue(value)) {
+    return $i18n.get({ id: 'styleAir', dm: '空' });
+  }
+
+  const m = /^(.+)px/.exec(value);
+  if (m) {
+    return m[1];
+  }
+
+  return value;
+}
+
+class Input extends Component {
+  componentDidMount() {
+    if (this.input) {
+      this.input.select();
+    }
+  }
+
+  render() {
+    return (
+      <input
+        className="vs-inline-input-input"
+        type="text"
+        ref={(ref) => {
+          this.input = ref;
+        }}
+        {...this.props}
+      />
+    );
+  }
+}
+
+class InlineInput extends Component {
+  static propTypes = {
+    className: PropTypes.string,
+    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+
+    inheritValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+
+    onChange: PropTypes.func,
+    negtive: PropTypes.bool,
+    compute: PropTypes.func,
+    highlight: PropTypes.bool,
+  };
+
+  static defaultProps = {
+    compute() {
+      return '0px';
+    },
+    highlight: false,
+  };
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      value: '',
+      editing: false,
+    };
+
+    this.pattern = this.props.negtive
+      ? /^(-?\d+(?:\.\d+)?)(px|rem|em|%|pt)?$|^auto$/i
+      : /^(\d+(?:\.\d+)?)(px|rem|em|%|pt)?$|^auto$/i;
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.value !== this.props.value) {
+      this.setState({ value: utils.isEmptyCssValue(nextProps.value) ? '' : nextProps.value });
+    }
+  }
+
+  setValue(value) {
+    this.setState({ value });
+    if (this.isValid(value) && this.props.onChange) {
+      this.props.onChange(value.trim());
+    }
+  }
+
+  isValid(value) {
+    return value.trim() === '' || this.pattern.test(value);
+  }
+
+  keyDown(e) {
+    if (e.keyCode === 27 || e.keyCode === 13) {
+      this.exitEdit();
+      e.preventDefault();
+      return;
+    }
+    if (e.keyCode !== 38 && e.keyCode !== 40) {
+      return;
+    }
+    e.preventDefault();
+
+    const factor = e.keyCode === 40 ? -1 : 1;
+    let value = e.target.value.trim();
+    if (!this.isValid(value)) {
+      value = utils.isEmptyCssValue(this.props.value) ? this.props.inheritValue : this.props.value;
+    }
+
+    if (utils.isEmptyCssValue(value) || value.toLowerCase() === 'auto') {
+      value = this.props.compute(value);
+    }
+
+    const m = this.pattern.exec(value);
+    if (!m[1]) return;
+    let n = parseFloat(m[1]) + factor;
+    if (!this.props.negtive && n < 0) {
+      n = 0;
+    }
+    this.setValue(`${n}${m[2] || 'px'}`);
+  }
+
+  exitEdit() {
+    if (!/\D+$/.test(this.state.value)) {
+      this.setValue(`${this.state.value}px`);
+    } else if (!this.pattern.test(this.state.value)) {
+      this.setValue(`${/\d+/.exec(this.state.value)[0]}px`);
+    }
+
+    this.setState({
+      editing: false,
+    });
+  }
+
+  enterEdit() {
+    this.setState({
+      editing: true,
+      value: utils.isEmptyCssValue(this.props.value) ? '' : this.props.value,
+    });
+  }
+
+  render() {
+    const { value, inheritValue, highlight } = this.props;
+    const className = classNames('vs-inline-input', this.props.className, {
+      've-highlight': highlight,
+    });
+
+    const display = diplayValue(utils.isEmptyCssValue(value) ? inheritValue : value);
+
+    return (
+      <div className={className}>
+        {!this.state.editing && (
+          <span className="vs-inline-input-text" onClick={this.enterEdit.bind(this)}>
+            {display}
+          </span>
+        )}
+        {this.state.editing && (
+          <Input
+            value={this.state.value}
+            placeholder={inheritValue}
+            onChange={e => this.setValue(e.target.value)}
+            onKeyDown={this.keyDown.bind(this)}
+            onBlur={this.exitEdit.bind(this)}
+          />
+        )}
+      </div>
+    );
+  }
+}
+
+function spliteMargin(all) {
+  if (!all) {
+    return {
+      top: null,
+      right: null,
+      bottom: null,
+      left: null,
+    };
+  }
+  let [top, right, bottom, left] = all.trim().split(/\s+/); // eslint-disable-line
+  if (utils.isEmptyCssValue(right)) {
+    right = top;
+  }
+  if (utils.isEmptyCssValue(bottom)) {
+    bottom = top;
+  }
+  if (utils.isEmptyCssValue(left)) {
+    left = right;
+  }
+  return {
+    top, right, bottom, left,
+  };
+}
+
+function compositeMargin(all, top, right, bottom, left) {
+  const ret = spliteMargin(all);
+
+  if (!utils.isEmptyCssValue(top)) {
+    ret.top = top;
+  }
+  if (!utils.isEmptyCssValue(right)) {
+    ret.right = right;
+  }
+  if (!utils.isEmptyCssValue(bottom)) {
+    ret.bottom = bottom;
+  }
+  if (!utils.isEmptyCssValue(left)) {
+    ret.left = left;
+  }
+
+  return ret;
+}
+
+function isFull(box) {
+  return (
+    !utils.isEmptyCssValue(box.top)
+    && !utils.isEmptyCssValue(box.right)
+    && !utils.isEmptyCssValue(box.bottom)
+    && !utils.isEmptyCssValue(box.left)
+  );
+}
+
+class LayoutBox extends Component {
+  static propTypes = {
+    prop: PropTypes.object,
+    className: PropTypes.string,
+    name: PropTypes.string,
+    negtive: PropTypes.bool,
+  };
+
+  constructor(props) {
+    super(props);
+
+    this.pattern = this.props.negtive
+      ? /^(-?\d+(?:\.\d+)?)(px|rem|em|%|pt)?$|^auto$/i
+      : /^(\d+(?:\.\d+)?)(px|rem|em|%|pt)?$|^auto$/i;
+  }
+
+  componentDidMount() {
+    this.shell.addEventListener('mousedown', (e) => {
+      // todo: dragging & interval add
+      const t = e.target;
+      if (t.dataset && t.dataset.handle) {
+        this.add(t.dataset.handle);
+      }
+    });
+  }
+
+  add(dir, factor = 1) {
+    if (!this.current || !this.inherit) return;
+    let value = utils.isEmptyCssValue(this.current[dir]) ? this.inherit[dir] : this.current[dir];
+
+    if (utils.isEmptyCssValue(value) || value.toLowerCase() === 'auto') {
+      value = this.compute(dir);
+    }
+
+    const m = this.pattern.exec(value);
+    if (!m[1]) return;
+    let n = parseFloat(m[1]) + factor;
+    if (!this.props.negtive && n < 0) {
+      n = 0;
+    }
+    this.change(this.current, dir, `${n}${m[2] || 'px'}`);
+  }
+
+  change(box, dir, val) {
+    const { name } = this.props;
+    box[dir] = val;
+    if (isFull(box)) {
+      utils.setPropertyValue(
+        this.props,
+        {
+          [name]: `${box.top} ${box.right} ${box.bottom} ${box.left}`,
+          [`${name}-top`]: null,
+          [`${name}-right`]: null,
+          [`${name}-bottom`]: null,
+          [`${name}-left`]: null,
+        },
+      );
+    } else {
+      utils.setPropertyValue(
+        this.props,
+        {
+          [name]: null,
+          [`${name}-top`]: box.top,
+          [`${name}-right`]: box.right,
+          [`${name}-bottom`]: box.bottom,
+          [`${name}-left`]: box.left,
+        },
+      );
+    }
+  }
+
+  compute(dir) {
+    const { name, node } = this.props;
+    // if (external) {
+    //   return getComputePropertyValue(node, `${name}-${dir}`);
+    // }
+    return '0px';
+  }
+
+  render() {
+    const {
+      name, negtive,
+    } = this.props;
+
+    const all = utils.getPropertyValue(this.props, name);
+    const top = utils.getPropertyValue(this.props, `${name}-top`);
+    const right = utils.getPropertyValue(this.props, `${name}-right`);
+    const bottom = utils.getPropertyValue(this.props, `${name}-bottom`);
+    const left = utils.getPropertyValue(this.props, `${name}-left`);
+
+    const current = compositeMargin(
+      all.current,
+      top.current,
+      right.current,
+      bottom.current,
+      left.current,
+    );
+
+    const inherit = compositeMargin(
+      all.inherit,
+      top.inherit,
+      right.inherit,
+      bottom.inherit,
+      left.inherit,
+    );
+
+    this.current = current;
+    this.inherit = inherit;
+
+    return (
+      <div
+        className={classNames('vs-layout-box', this.props.className)}
+        ref={(ref) => {
+          this.shell = ref;
+        }}
+      >
+        <div className="vs-layout-handle vs-handle-top" data-handle="top">
+          <Icons name="style.handle" className="vs-handle-icon" size="12px" />
+        </div>
+        <InlineInput
+          className="vs-layout-input-top"
+          value={current.top}
+          inheritValue={inherit.top}
+          compute={() => this.compute('top')}
+          negtive={negtive}
+          highlight={current.top != undefined}
+          onChange={val => this.change(current, 'top', val)}
+        />
+
+        <div className="vs-layout-handle vs-handle-right" data-handle="right">
+          <Icons name="style.handle" className="vs-handle-icon" size="12px" />
+        </div>
+        <InlineInput
+          className="vs-layout-input-right"
+          value={current.right}
+          inheritValue={inherit.right}
+          negtive={negtive}
+          highlight={current.right != undefined}
+          compute={() => this.compute('right')}
+          onChange={val => this.change(current, 'right', val)}
+        />
+
+        <div className="vs-layout-handle vs-handle-bottom" data-handle="bottom">
+          <span className="vs-handle-inscription">{name}</span>
+          <Icons name="style.handle" className="vs-handle-icon" size="12px" />
+        </div>
+        <InlineInput
+          className="vs-layout-input-bottom"
+          value={current.bottom}
+          inheritValue={inherit.bottom}
+          negtive={negtive}
+          highlight={current.bottom != undefined}
+          compute={() => this.compute('bottom')}
+          onChange={val => this.change(current, 'bottom', val)}
+        />
+
+        <div className="vs-layout-handle vs-handle-left" data-handle="left">
+          <Icons name="style.handle" className="vs-handle-icon" size="12px" />
+        </div>
+        <InlineInput
+          className="vs-layout-input-left"
+          value={current.left}
+          inheritValue={inherit.left}
+          negtive={negtive}
+          highlight={current.left != undefined}
+          compute={() => this.compute('left')}
+          onChange={val => this.change(current, 'left', val)}
+        />
+      </div>
+    );
+  }
+}
+
+class MarginAuto extends Component {
+  static propTypes = {
+    prop: PropTypes.object,
+  };
+
+  setAuto(box) {
+    box.left = 'auto';
+    box.right = 'auto';
+    if (isFull(box)) {
+      utils.setPropertyValue(
+        this.props,
+        {
+          margin: `${box.top} ${box.right} ${box.bottom} ${box.left}`,
+          'margin-top': null,
+          'margin-right': null,
+          'margin-bottom': null,
+          'margin-left': null,
+        },
+      );
+    } else {
+      utils.setPropertyValue(
+        this.props,
+        {
+          margin: null,
+          'margin-top': box.top,
+          'margin-right': box.right,
+          'margin-bottom': box.bottom,
+          'margin-left': box.left,
+        },
+      );
+    }
+  }
+
+  render() {
+    const all = utils.getPropertyValue(this.props, 'margin');
+    const top = utils.getPropertyValue(this.props, 'margin-top');
+    const bottom = utils.getPropertyValue(this.props, 'margin-bottom');
+    const right = utils.getPropertyValue(this.props, 'margin-right');
+    const left = utils.getPropertyValue(this.props, 'margin-left');
+
+    const current = compositeMargin(
+      all.current,
+      top.current,
+      right.current,
+      bottom.current,
+      left.current,
+    );
+
+    const inherit = compositeMargin(
+      all.inherit,
+      top.inherit,
+      right.inherit,
+      bottom.inherit,
+      left.inherit,
+    );
+
+    const eright = utils.isEmptyCssValue(current.right) ? inherit.right : current.right;
+    const eleft = utils.isEmptyCssValue(current.left) ? inherit.left : current.left;
+
+    const className = classNames('vs-margin-auto', {
+      've-active': eright === 'auto' && eleft === 'auto',
+    });
+
+    return (
+      <Button
+        className={className}
+        name="style.auto"
+        size="medium"
+        onClick={() => this.setAuto(current)}
+      />
+    );
+  }
+}
+
+class PaddingMargin extends Component {
+  static propTypes = {
+    prop: PropTypes.object,
+    className: PropTypes.string,
+  };
+
+  static transducer = utils.transducer;
+
+  componentWillMount() {
+
+  }
+
+  componentWillUnmount() {
+
+  }
+
+  render() {
+    const className = classNames('vs-style-layout-padding-margin', this.props.className);
+
+    return (
+      <div className={className}>
+        <LayoutBox
+          className="vs-margin-box"
+          name="margin"
+          negtive
+          {...this.props}
+        />
+
+        <LayoutBox className="vs-padding-box" name="padding" {...this.props} />
+
+        <MarginAuto {...this.props} />
+      </div>
+    );
+  }
+}
+
+export default PaddingMargin;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/layout/position.js b/packages/editor-setters/src/style-setter/lc-style-setter/layout/position.js
new file mode 100644
index 000000000..fcce31e95
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/layout/position.js
@@ -0,0 +1,10 @@
+import React, { Component, PropTypes } from 'react';
+import classNames from 'classnames';
+
+class Position extends Component {
+  render() {
+    return null;
+  }
+}
+
+export default Position;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/layout/size.js b/packages/editor-setters/src/style-setter/lc-style-setter/layout/size.js
new file mode 100644
index 000000000..c30f06f1f
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/layout/size.js
@@ -0,0 +1,82 @@
+import React, { Component, PropTypes } from 'react';
+import classNames from 'classnames';
+import NumberControl from '@ali/ve-number-control';
+import utils from '../utils';
+function getRectSize(node, field) {
+  const nativeNode = node;
+  if (!nativeNode) return 0;
+  return nativeNode.getBoundingClientRect()[field];
+}
+
+function getPercent(node, field) {
+  const nativeNode = node;
+  if (!nativeNode) return 100;
+  const parentNode = nativeNode.parentNode;
+  if (!parentNode) return 100;
+  const s = nativeNode.getBoundingClientRect()[field];
+  const p = parentNode.getBoundingClientRect()[field];
+  return (s / p * 100).toFixed(0);
+}
+
+class Size extends Component {
+  static propTypes = {
+    prop: PropTypes.object,
+    field: PropTypes.string,
+    className: PropTypes.string,
+  };
+
+  static displayName = 'StyleLayoutSizeSetter';
+
+  componentWillMount() {
+
+  }
+
+  componentWillUnmount() {
+
+  }
+
+  render() {
+    const className = classNames('vs-style-layout-size', this.props.className);
+    const { field, node } = this.props;
+    const { current, inherit } = utils.getPropertyValue(this.props, field);
+
+    return (
+      <NumberControl
+        className={className}
+        placeholder={inherit}
+        value={current}
+        onChange={(val) => utils.setPropertyValue(this.props, field, val)}
+        min={0}
+        compute={() => `${getRectSize(node, field)}px`}
+        units={[{
+          type: 'px',
+          cast(v, validNumber) {
+            if (v === 'auto') {
+              v = getRectSize(node, field);
+            } else if (!validNumber) {
+              v = '0';
+            }
+            return `${v}px`;
+          },
+          list: true,
+        }, {
+          type: '%',
+          list: true,
+          cast(v, validNumber) {
+            if (v === 'auto') {
+              return '100%';
+            }
+            v = getPercent(node, field) || '100';
+            return `${v}%`;
+          },
+        }, {
+          type: 'auto',
+          preset: true,
+          list: true,
+        }, 'em', 'rem', 'pt', 'ex', 'ch', 'vh', 'vw', 'vmin', 'vmax', 'mm', 'q', 'cm', 'in', 'pc']}
+      />
+    );
+  }
+}
+
+export default Size;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/layout/width.js b/packages/editor-setters/src/style-setter/lc-style-setter/layout/width.js
new file mode 100644
index 000000000..8d563fc43
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/layout/width.js
@@ -0,0 +1,20 @@
+import React, { Component, PropTypes } from 'react';
+import Size from './size';
+import utils from '../utils';
+
+class Width extends Component {
+  static propTypes = {
+    prop: PropTypes.object,
+    className: PropTypes.string,
+  };
+
+  static displayName = 'StyleLayoutWidthSetter';
+
+  static transducer = utils.transducer;
+
+  render() {
+    return <Size {...this.props} field="width" />;
+  }
+}
+
+export default Width;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/style.less b/packages/editor-setters/src/style-setter/lc-style-setter/style.less
new file mode 100644
index 000000000..06066d9d8
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/style.less
@@ -0,0 +1,633 @@
+@import "~@ali/ve-less-variables/index.less";
+@layout-handle-color: rgba(0, 0, 0, .3);
+// todo remove
+:root {
+  --color-brand: #006cff;
+  --color-brand-light: #197aff;
+  --color-brand-dark: #0060e5;
+  --color-canvas-background: rgba(31, 56, 88, 0.06);
+  --color-icon-normal: rgba(31, 56, 88, 0.4);
+  --color-icon-hover: rgba(31, 56, 88, 0.6);
+  --color-icon-active: #006cff;
+  --color-icon-reverse: #ffffff;
+  --color-line-normal: rgba(31, 56, 88, 0.1);
+  --color-line-darken: rgba(18, 32, 50, 0.1);
+  --color-title: rgba(0, 0, 0, 0.8);
+  --color-text: rgba(0, 0, 0, 0.6);
+  --color-text-dark: rgba(0, 0, 0, 0.6);
+  --color-text-light: rgba(26, 26, 26, 0.6);
+  --color-text-reverse: rgba(255, 255, 255, 0.8);
+  --color-text-regular: rgba(31, 56, 88, 0.8);
+  --color-field-label: rgba(0, 0, 0, 0.4);
+  --color-field-text: rgba(0, 0, 0, 0.6);
+  --color-field-placeholder: rgba(31, 56, 88, 0.3);
+  --color-field-border: rgba(31, 56, 88, 0.3);
+  --color-field-border-hover: rgba(31, 56, 88, 0.4);
+  --color-field-border-active: rgba(31, 56, 88, 0.6);
+  --color-field-background: #ffffff;
+  --color-function-success: #66bc5c;
+  --color-function-success-dark: #4da243;
+  --color-function-success-light: #88cb80;
+  --color-function-warning: #fabd0e;
+  --color-function-warning-dark: #d19c04;
+  --color-function-warning-light: #fbcb40;
+  --color-function-information: #2E76A6;
+  --color-function-information-dark: #235a7e;
+  --color-function-information-light: #3e91c9;
+  --color-function-error: #f04631;
+  --color-function-error-dark: #de2710;
+  --color-function-error-light: #f37161;
+  --color-pane-background: #ffffff;
+  --color-block-background-normal: #ffffff;
+  --color-block-background-light: rgba(31, 56, 88, 0.04);
+  --color-block-background-shallow: rgba(31, 56, 88, 0.06);
+  --color-block-background-dark: rgba(31, 56, 88, 0.1);
+  --color-block-background-disabled: rgba(31, 56, 88, 0.2);
+  --color-block-background-deep-dark: #BAC3CC;
+  --color-layer-mask-background: rgba(0, 0, 0, 0.1);
+  --color-layer-tooltip-background: rgba(44, 47, 51, 0.8);
+}
+
+.gradient-dark-mixin() {
+  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.2));
+}
+
+.gradient-white-mixin() {
+  background: linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1));
+}
+
+.border-dark-mixin() {
+  border: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.vs-style {
+  .vs-style-source {
+    box-sizing: border-box;
+    min-width: 80px;
+    width: auto;
+    height: 26px;
+    padding: 0 10px;
+    border: none;
+    border-radius: 3px;
+    background-color: var(--color-brand, @brand-color-1);
+    color: var(--color-text-reverse, @white-alpha-2);
+    font-size: 12px;
+    outline: 0;
+    &:hover {
+      background-color: var(--color-brand-dark, @brand-color-1-3);
+      cursor: pointer;
+    }
+    margin-bottom: 5px;
+  }
+  .vs-flex-reverse {
+    transform: scaleX(-1);
+  }
+  .vs-flex-reverse-v {
+    transform: scaleY(-1);
+  }
+}
+
+.vs-style-reverse-h {
+  transform-origin: center;
+  transform: scaleX(-1);
+}
+
+.vs-style-reverse-v {
+  transform-origin: center;
+  transform: scaleY(-1);
+}
+
+.vs-style-reverse-v-h {
+  transform-origin: center;
+  transform: scale(-1, -1);
+}
+
+.vs-style-rotate-180 {
+  transform-origin: center;
+  transform: rotate(180deg);
+}
+
+.vs-style-rotate-180-r {
+  transform-origin: center;
+  transform: rotate(-180deg);
+}
+
+.vs-style-rotate-90 {
+  transform-origin: center;
+  transform: rotate(90deg);
+}
+
+.vs-style-rotate-90-r {
+  transform-origin: center;
+  transform: rotate(-90deg);
+}
+
+.vs-style-rotate-45 {
+  transform-origin: center;
+  transform: rotate(45deg);
+}
+
+.vs-style-rotate-45-r {
+  transform-origin: center;
+  transform: rotate(-45deg);
+}
+
+.ve-field.vs-flex-field {
+  display: flex;
+  >.ve-field {
+    flex: 1;
+    padding: 5px;
+    &.ve-inline-field .ve-field-title {
+      width: 20px;
+      letter-spacing: 0;
+      margin-right: 3px;
+      word-break: normal;
+    }
+  }
+}
+
+.ve-field-title svg>* {
+  fill: var(--color-icon-normal, @normal-alpha-4);
+}
+
+.vs-style-layout {
+  >.vs-field-display {
+    >.ve-field-head>.ve-field-title {
+      width: auto;
+      margin-right: 3px;
+      word-break: normal;
+    }
+  }
+  .vs-style-diplay {}
+  .vs-style-layout-flex {
+    margin: 8px 5px 5px;
+    >.vs-style-flex-property {
+      &:not(:first-child) {
+        margin-top: 5px;
+      }
+      >.ve-option {
+        flex: 1;
+      }
+    }
+  }
+  .vs-style-layout-padding-margin {
+    // width: 190px;
+    height: 107px;
+    margin: 25px 32px;
+    position: relative;
+    .vs-layout-box {
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      position: absolute;
+      .vs-inline-input {
+        position: absolute;
+        width: 36px;
+        height: 16px;
+        >.vs-inline-input-text {
+          display: block;
+          font-family: @font-family;
+          color: @text-color;
+          font-size: 12px;
+          line-height: 16px;
+          opacity: 0.6;
+          cursor: text;
+          &:hover {
+            opacity: 1;
+            text-decoration: underline;
+          }
+        }
+        >.vs-inline-input-input {
+          font-family: @font-family;
+          color: @text-color;
+          font-size: 12px;
+          border: none;
+          background: rgba(0, 0, 0, 0.5);
+          border-radius: 3px;
+          width: 100%;
+          height: 16px;
+          line-height: 16px;
+          padding: 0 2px;
+          box-sizing: border-box;
+          outline: none;
+        }
+        &.vs-layout-input-top,
+        &.vs-layout-input-bottom {
+          left: 50%;
+          margin-left: -18px;
+          text-align: center;
+          .vs-inline-input-input {
+            text-align: center;
+          }
+        }
+        &.vs-layout-input-left,
+        &.vs-layout-input-right {
+          top: 50%;
+          margin-top: -8px;
+        }
+        &.vs-layout-input-top {
+          top: -17px;
+        }
+        &.vs-layout-input-bottom {
+          bottom: -17px;
+        }
+        &.vs-layout-input-left {
+          left: -38px;
+          text-align: right;
+          .vs-inline-input-input {
+            text-align: right;
+          }
+        }
+        &.vs-layout-input-right {
+          right: -38px;
+        }
+      }
+      .vs-layout-handle {
+        position: absolute;
+        display: block;
+        font-size: 0;
+        border: solid 14px transparent;
+        box-sizing: border-box;
+        opacity: 0.8;
+        .vs-handle-icon {
+          position: absolute;
+          opacity: 0.6;
+          max-width: none;
+          max-height: none;
+          pointer-events: none;
+        }
+        &.vs-handle-top {
+          top: 0;
+          border-top-color: @layout-handle-color;
+          border-bottom-width: 0;
+          .vs-handle-icon {
+            bottom: 1px;
+            left: 50%;
+            transform: translateX(-50%);
+          }
+        }
+        &.vs-handle-right {
+          right: 0;
+          border-right-color: @layout-handle-color;
+          border-left-width: 0;
+          .vs-handle-icon {
+            left: 1px;
+            top: 50%;
+            transform: translateY(-50%) rotate(90deg);
+          }
+        }
+        &.vs-handle-bottom {
+          bottom: 0;
+          border-bottom-color: @layout-handle-color;
+          border-top-width: 0;
+          .vs-handle-icon {
+            top: 1px;
+            left: 50%;
+            transform: translateX(-50%) rotate(180deg);
+          }
+          .vs-handle-inscription {
+            position: absolute;
+            left: 3px;
+            top: 1px;
+            font-size: 12px;
+            text-transform: uppercase;
+            transform-origin: left;
+            transform: scale(0.6);
+            pointer-events: none;
+          }
+        }
+        &.vs-handle-left {
+          left: 0;
+          border-left-color: @layout-handle-color;
+          border-right-width: 0;
+          .vs-handle-icon {
+            right: 1px;
+            top: 50%;
+            transform: translateY(-50%) rotate(-90deg);
+          }
+        }
+        &.vs-handle-top,
+        &.vs-handle-bottom {
+          height: 0;
+          left: 2px;
+          right: 2px;
+          cursor: row-resize;
+        }
+        &.vs-handle-left,
+        &.vs-handle-right {
+          width: 0;
+          bottom: 2px;
+          top: 2px;
+          cursor: col-resize;
+        }
+        &:hover {
+          opacity: 1;
+        }
+      }
+      &.vs-padding-box {
+        top: 18px;
+        bottom: 18px;
+        left: 18px;
+        right: 18px;
+        .vs-handle-icon>path {
+          transform-origin: center;
+          transform: rotate(180deg);
+        }
+        .vs-inline-input {
+          &.vs-layout-input-top {
+            top: 16px;
+          }
+          &.vs-layout-input-bottom {
+            bottom: 16px;
+          }
+          &.vs-layout-input-left {
+            left: 16px;
+            text-align: left;
+            .vs-inline-input-input {
+              text-align: left;
+            }
+          }
+          &.vs-layout-input-right {
+            right: 16px;
+            text-align: right;
+            .vs-inline-input-input {
+              text-align: right;
+            }
+          }
+        }
+      }
+    }
+    .vs-margin-auto {
+      position: absolute;
+      bottom: 0;
+      right: -35px;
+      cursor: pointer;
+      padding: 2px;
+      border-radius: 2px;
+      background: rgba(255, 255, 255, 0.3);
+      &.ve-active {
+        background: rgba(0, 0, 0, 0.4);
+      }
+    }
+    .ve-highlight {
+      .vs-inline-input-text {
+        font-weight: bold;
+        color: var(--color-brand, '#006cff') !important;
+      }
+    }
+  }
+}
+
+.vs-style-typography {
+  .ve-field.ve-inline-field {
+    width: 100%;
+    padding: 3px;
+    >.ve-field-head .ve-field-title {
+      width: 20px;
+      margin-right: 3px;
+      justify-content: flex-end;
+    }
+  }
+  .ve-choice-control.ve-compact .ve-option {
+    padding: 1px;
+  }
+  .vs-style-font-family {
+    width: 100%;
+  }
+  .vs-style-font-weight {
+    width: 143px;
+  }
+  .vs-style-font-color {
+    width: 100%;
+  }
+  .vs-style-text-align {
+    width: 100%;
+  }
+}
+
+.vs-style-background {
+  .ve-field.ve-inline-field {
+    width: 100%;
+    padding: 3px;
+    >.ve-field-head .ve-field-title {
+      width: 20px;
+      margin-right: 3px;
+      justify-content: flex-end;
+    }
+  }
+  .ve-choice-control.ve-compact .ve-option {
+    padding: 1px;
+  }
+  .vs-style-background-color {
+    width: 100%;
+  }
+  .vs-style-background-repeat {
+    width: 126px;
+  }
+  .vs-style-background-image {
+    width: 100%;
+  }
+  .vs-style-background-position {
+    display: flex;
+    align-items: center;
+    .vs-style-position-preset {
+      width: 70px;
+      height: 70px;
+      position: relative;
+      .vs-preset-item {
+        .gradient-white-mixin;
+        position: absolute;
+        height: 20px;
+        width: 20px;
+        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
+        border-radius: 1px;
+        transition: background 0.2s;
+        opacity: 0.8;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        &:hover {
+          cursor: pointer;
+          opacity: 1;
+        }
+        &.ve-active {
+          .gradient-dark-mixin;
+          opacity: 1;
+          box-shadow: none;
+        }
+        &.vs-preset-left-top {
+          left: 0;
+          top: 0;
+          >.ve-svgicon {
+            transform: rotate(-45deg);
+          }
+        }
+        &.vs-preset-center-top {
+          left: 50%;
+          margin-left: -10px;
+          top: 0;
+        }
+        &.vs-preset-right-top {
+          right: 0;
+          top: 0;
+          >.ve-svgicon {
+            transform: rotate(45deg);
+          }
+        }
+        &.vs-preset-left-center {
+          left: 0;
+          top: 50%;
+          margin-top: -10px;
+          >.ve-svgicon {
+            transform: rotate(-90deg);
+          }
+        }
+        &.vs-preset-center {
+          left: 50%;
+          margin-left: -10px;
+          top: 50%;
+          margin-top: -10px;
+        }
+        &.vs-preset-right-center {
+          right: 0;
+          top: 50%;
+          margin-top: -10px;
+          >.ve-svgicon {
+            transform: rotate(90deg);
+          }
+        }
+        &.vs-preset-left-bottom {
+          left: 0;
+          bottom: 0;
+          >.ve-svgicon {
+            transform: rotate(-135deg);
+          }
+        }
+        &.vs-preset-center-bottom {
+          left: 50%;
+          margin-left: -10px;
+          bottom: 0;
+          >.ve-svgicon {
+            transform: scaleY(-1);
+          }
+        }
+        &.vs-preset-right-bottom {
+          right: 0;
+          bottom: 0;
+          >.ve-svgicon {
+            transform: rotate(135deg);
+          }
+        }
+      }
+    }
+    .vs-style-position-custom {
+      flex: 1;
+      margin-left: 10px;
+    }
+  }
+  .vs-style-background-size {
+    display: flex;
+    align-items: center;
+    .vs-style-bgsize-preset {}
+    .vs-style-bgsize-custom {
+      flex: 1;
+    }
+  }
+}
+
+.vs-style-effects {
+  .ve-field.ve-inline-field {
+    width: 100%;
+    padding: 3px;
+    >.ve-field-head .ve-field-title {
+      width: 20px;
+      margin-right: 3px;
+      justify-content: flex-end;
+    }
+  }
+  .ve-number-control.vs-style-opacity.ve-has-units {
+    width: 100%;
+  }
+  .ve-select-control.vs-style-cursor {
+    width: 100%;
+    path {
+      fill: var(--color-text, @normal-alpha-4);
+    }
+  }
+}
+
+.vs-style-pseudo-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  .vs-style-source {
+    margin-top: 6px;
+  }
+  .vs-style-pseudo {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .vs-style-pseudo-select-control {
+      width: 105px;
+    }
+    span {
+      margin-right: 5px;
+    }
+  }
+}
+
+.control-button-mixin() {
+  margin: 2px;
+  padding: 5px;
+  border-radius: 2px;
+  text-align: center;
+  cursor: pointer;
+}
+
+.vs-style-border-style,
+.vs-style-border-radius {
+  display: flex;
+  margin-top: 5px;
+  .border-dark-mixin;
+  .vs-style-border-setter-left-pane,
+  .vs-style-border-setter-right-pane {
+    display: flex;
+  }
+  .vs-style-border-setter-right-pane {
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    .ve-number-control,
+    .ve-color-control,
+    .ve-select-control {
+      width: 80px;
+      margin-right: 4px;
+    }
+    >div {
+      display: flex;
+      align-items: center;
+    }
+  }
+  .vs-style-border-setter-left-pane {
+    width: 40%;
+    align-items: center;
+    justify-content: space-around;
+  }
+  .vs-style-border-setter-row {
+    >div {
+      .gradient-white-mixin;
+      .control-button-mixin;
+    }
+    .vs-style-border-selected {
+      .gradient-dark-mixin;
+    }
+  }
+}
+
+.ve-style-box-shadow-select {
+  display: flex;
+  .ve-color-control {
+    width: 100%;
+  }
+}
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svg/fill.js b/packages/editor-setters/src/style-setter/lc-style-setter/svg/fill.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svg/index.js b/packages/editor-setters/src/style-setter/lc-style-setter/svg/index.js
new file mode 100644
index 000000000..9d6614476
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svg/index.js
@@ -0,0 +1,10 @@
+import React, { Component, PropTypes } from 'react';
+import classNames from 'classnames';
+
+class Svg extends Component {
+  render() {
+    return null;
+  }
+}
+
+export default Svg;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svglib/align-baseline-v.js b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/align-baseline-v.js
new file mode 100644
index 000000000..8acb949d5
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/align-baseline-v.js
@@ -0,0 +1,14 @@
+
+const React = require('react');
+  const IconBase = require('@ali/vu-icon-base');
+
+  function AlignBaselineV(props) {
+    return (
+      <IconBase viewBox="0 0 24 17" {...props}>
+        <g fillRule="evenodd"><path opacity=".5" d="M0 0h1v17H0z"/><path d="M2 9h9v5H2V9zm1 1h2v3H3v-3z"/><path opacity=".4" d="M5 4h5v3H5z"/><path d="M3 4v3h7V4H3zM2 3h9v5H2V3z"/></g>
+      </IconBase>
+    );
+  }
+  AlignBaselineV.displayName = 'AlignBaselineV';
+
+  module.exports = AlignBaselineV;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svglib/align-baseline.js b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/align-baseline.js
new file mode 100644
index 000000000..c4180bb42
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/align-baseline.js
@@ -0,0 +1,14 @@
+
+const React = require('react');
+  const IconBase = require('@ali/vu-icon-base');
+
+  function AlignBaseline(props) {
+    return (
+      <IconBase viewBox="0 0 21 11" {...props}>
+        <g fillRule="evenodd"><path d="M0 5h21v1H0V5zm4.5 0h6v1h-6V5zm6 0h6v1h-6V5z" opacity=".5"/><path d="M11 1h5v9h-5V1zm1 1h3v3h-3V2z"/><path opacity=".4" d="M6 5h3v5H6z"/><path d="M6 3v7h3V3H6zM5 2h5v9H5V2z"/></g>
+      </IconBase>
+    );
+  }
+  AlignBaseline.displayName = 'AlignBaseline';
+
+  module.exports = AlignBaseline;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svglib/align-center-v.js b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/align-center-v.js
new file mode 100644
index 000000000..8bd898c29
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/align-center-v.js
@@ -0,0 +1,14 @@
+
+const React = require('react');
+  const IconBase = require('@ali/vu-icon-base');
+
+  function AlignCenterV(props) {
+    return (
+      <IconBase viewBox="0 0 9 17" {...props}>
+        <g fillRule="evenodd"><path d="M4 0h1v17H4V0zm0 8.5h1v6H4v-6zm0-6h1v6H4v-6z" opacity=".5"/><path d="M0 9h9v5H0z"/><path opacity=".4" d="M1 4h7v3H1z"/><path d="M1 4v3h7V4H1zM0 3h9v5H0V3z"/></g>
+      </IconBase>
+    );
+  }
+  AlignCenterV.displayName = 'AlignCenterV';
+
+  module.exports = AlignCenterV;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svglib/align-center.js b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/align-center.js
new file mode 100644
index 000000000..c6c74eae7
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/align-center.js
@@ -0,0 +1,14 @@
+
+const React = require('react');
+  const IconBase = require('@ali/vu-icon-base');
+
+  function AlignCenter(props) {
+    return (
+      <IconBase viewBox="0 0 21 9" {...props}>
+        <g fillRule="evenodd"><path d="M0 4h21v1H0V4zm4.5 0h6v1h-6V4zm6 0h6v1h-6V4z" opacity=".5"/><path d="M11 0h5v9h-5z"/><path opacity=".4" d="M6 1h3v7H6z"/><path d="M6 1v7h3V1H6zM5 0h5v9H5V0z"/></g>
+      </IconBase>
+    );
+  }
+  AlignCenter.displayName = 'AlignCenter';
+
+  module.exports = AlignCenter;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svglib/align-end-v.js b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/align-end-v.js
new file mode 100644
index 000000000..a66ca70ab
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/align-end-v.js
@@ -0,0 +1,14 @@
+
+const React = require('react');
+  const IconBase = require('@ali/vu-icon-base');
+
+  function AlignEndV(props) {
+    return (
+      <IconBase viewBox="0 0 24 17" {...props}>
+        <g fillRule="evenodd"><path opacity=".5" d="M23 0h1v17h-1z"/><path d="M13 9h9v5h-9z"/><path opacity=".4" d="M14 4h7v3h-7z"/><path d="M14 4v3h7V4h-7zm-1-1h9v5h-9V3z"/></g>
+      </IconBase>
+    );
+  }
+  AlignEndV.displayName = 'AlignEndV';
+
+  module.exports = AlignEndV;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svglib/align-end.js b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/align-end.js
new file mode 100644
index 000000000..3ceb04949
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/align-end.js
@@ -0,0 +1,14 @@
+
+const React = require('react');
+  const IconBase = require('@ali/vu-icon-base');
+
+  function AlignEnd(props) {
+    return (
+      <IconBase viewBox="0 0 21 18" {...props}>
+        <g fillRule="evenodd"><path opacity=".5" d="M0 17h21v1H0z"/><path d="M11 7h5v9h-5z"/><path opacity=".4" d="M6 8h3v7H6z"/><path d="M6 8v7h3V8H6zM5 7h5v9H5V7z"/></g>
+      </IconBase>
+    );
+  }
+  AlignEnd.displayName = 'AlignEnd';
+
+  module.exports = AlignEnd;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svglib/align-start-v.js b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/align-start-v.js
new file mode 100644
index 000000000..acceb0a63
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/align-start-v.js
@@ -0,0 +1,14 @@
+
+const React = require('react');
+  const IconBase = require('@ali/vu-icon-base');
+
+  function AlignStartV(props) {
+    return (
+      <IconBase viewBox="0 0 24 17" {...props}>
+        <g fillRule="evenodd"><path opacity=".5" d="M0 0h1v17H0z"/><path d="M2 9h9v5H2z"/><path opacity=".4" d="M3 4h7v3H3z"/><path d="M3 4v3h7V4H3zM2 3h9v5H2V3z"/></g>
+      </IconBase>
+    );
+  }
+  AlignStartV.displayName = 'AlignStartV';
+
+  module.exports = AlignStartV;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svglib/align-start.js b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/align-start.js
new file mode 100644
index 000000000..cd8c68404
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/align-start.js
@@ -0,0 +1,14 @@
+
+const React = require('react');
+  const IconBase = require('@ali/vu-icon-base');
+
+  function AlignStart(props) {
+    return (
+      <IconBase viewBox="0 0 21 18" {...props}>
+        <g fillRule="evenodd"><path opacity=".5" d="M0 0h21v1H0z"/><path d="M11 2h5v9h-5z"/><path opacity=".4" d="M6 3h3v7H6z"/><path d="M6 3v7h3V3H6zM5 2h5v9H5V2z"/></g>
+      </IconBase>
+    );
+  }
+  AlignStart.displayName = 'AlignStart';
+
+  module.exports = AlignStart;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svglib/align-stretch-v.js b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/align-stretch-v.js
new file mode 100644
index 000000000..0e5b86320
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/align-stretch-v.js
@@ -0,0 +1,14 @@
+
+const React = require('react');
+  const IconBase = require('@ali/vu-icon-base');
+
+  function AlignStretchV(props) {
+    return (
+      <IconBase viewBox="0 0 24 17" {...props}>
+        <g fillRule="evenodd"><path opacity=".5" d="M23 0h1v17h-1zM0 0h1v17H0z"/><path d="M2 9h20v5H2z"/><path opacity=".4" d="M3 4h18v3H3z"/><path d="M3 4v3h18V4H3zM2 3h20v5H2V3z"/></g>
+      </IconBase>
+    );
+  }
+  AlignStretchV.displayName = 'AlignStretchV';
+
+  module.exports = AlignStretchV;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svglib/align-stretch.js b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/align-stretch.js
new file mode 100644
index 000000000..0adc2e999
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/align-stretch.js
@@ -0,0 +1,14 @@
+
+const React = require('react');
+  const IconBase = require('@ali/vu-icon-base');
+
+  function AlignStretch(props) {
+    return (
+      <IconBase viewBox="0 0 21 18" {...props}>
+        <g fillRule="evenodd"><path opacity=".5" d="M0 17h21v1H0zM0 0h21v1H0z"/><path d="M11 2h5v14h-5z"/><path opacity=".4" d="M6 3h3v12H6z"/><path d="M6 3v12h3V3H6zM5 2h5v14H5V2z"/></g>
+      </IconBase>
+    );
+  }
+  AlignStretch.displayName = 'AlignStretch';
+
+  module.exports = AlignStretch;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svglib/auto.js b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/auto.js
new file mode 100644
index 000000000..72968321f
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/auto.js
@@ -0,0 +1,17 @@
+
+const React = require('react');
+  const IconBase = require('@ali/vu-icon-base');
+
+  function Auto(props) {
+    return (
+      <IconBase viewBox="0 0 1024 1024" {...props}>
+        <path d="M486.4 102.4l51.2 0 0 409.6-51.2 0 0-409.6Z"/>
+  <path d="M486.4 819.2l51.2 0 0 102.4-51.2 0 0-102.4Z"/>
+  <path d="M307.2 204.8l409.6 0 0 256-409.6 0 0-256Z"/>
+  <path d="M768 563.2l0 204.8L256 768l0-204.8L768 563.2M819.2 512 204.8 512l0 307.2 614.4 0L819.2 512 819.2 512z"/>
+      </IconBase>
+    );
+  }
+  Auto.displayName = 'Auto';
+
+  module.exports = Auto;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svglib/block.js b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/block.js
new file mode 100644
index 000000000..1ff0025d1
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/block.js
@@ -0,0 +1,16 @@
+
+const React = require('react');
+  const IconBase = require('@ali/vu-icon-base');
+
+  function Block(props) {
+    return (
+      <IconBase viewBox="0 0 22 14" {...props}>
+        <path opacity=".15" d="M19 3v8H3V3h16m1-1H2v10h18V2z"/>
+  <path d="M19.8 1H2.2A1.2 1.2 0 0 0 1 2.2v9.6A1.2 1.2 0 0 0 2.2 13h17.6a1.2 1.2 0 0 0 1.2-1.2V2.2A1.2 1.2 0 0 0 19.8 1zm.2 11H2V2h18v10z"/>
+  <path opacity=".35" d="M3 3h16v8H3z"/>
+      </IconBase>
+    );
+  }
+  Block.displayName = 'Block';
+
+  module.exports = Block;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svglib/blur.js b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/blur.js
new file mode 100644
index 000000000..004c5b76c
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/blur.js
@@ -0,0 +1,14 @@
+
+const React = require('react');
+  const IconBase = require('@ali/vu-icon-base');
+
+  function Blur(props) {
+    return (
+      <IconBase viewBox="0 0 1024 1024" {...props}>
+        <path d="M598.016 361.984q25.984 0 45.013333 18.986667t18.986667 45.013333-18.986667 45.013333-45.013333 18.986667-45.013333-18.986667-18.986667-45.013333 18.986667-45.013333 45.013333-18.986667zM598.016 534.016q25.984 0 45.013333 18.986667t18.986667 45.013333-18.986667 45.013333-45.013333 18.986667-45.013333-18.986667-18.986667-45.013333 18.986667-45.013333 45.013333-18.986667zM425.984 726.016q18.005333 0 31.018667 11.989333t13.013333 29.994667-13.013333 29.994667-31.018667 11.989333-29.994667-11.989333-11.989333-29.994667 11.989333-29.994667 29.994667-11.989333zM425.984 361.984q25.984 0 45.013333 18.986667t18.986667 45.013333-18.986667 45.013333-45.013333 18.986667-45.013333-18.986667-18.986667-45.013333 18.986667-45.013333 45.013333-18.986667zM598.016 873.984q20.010667 0 20.010667 22.016t-20.010667 22.016q-22.016 0-22.016-22.016t22.016-22.016zM598.016 726.016q18.005333 0 29.994667 11.989333t11.989333 29.994667-11.989333 29.994667-29.994667 11.989333-31.018667-11.989333-13.013333-29.994667 13.013333-29.994667 31.018667-11.989333zM896 576q22.016 0 22.016 22.016 0 20.010667-22.016 20.010667t-22.016-20.010667q0-22.016 22.016-22.016zM768 214.016q18.005333 0 29.994667 11.989333t11.989333 29.994667-11.989333 29.994667-29.994667 11.989333-29.994667-11.989333-11.989333-29.994667 11.989333-29.994667 29.994667-11.989333zM768 384q18.005333 0 29.994667 11.989333t11.989333 29.994667-11.989333 31.018667-29.994667 13.013333-29.994667-13.013333-11.989333-31.018667 11.989333-29.994667 29.994667-11.989333zM768 726.016q18.005333 0 29.994667 11.989333t11.989333 29.994667-11.989333 29.994667-29.994667 11.989333-29.994667-11.989333-11.989333-29.994667 11.989333-29.994667 29.994667-11.989333zM768 553.984q18.005333 0 29.994667 13.013333t11.989333 31.018667-11.989333 29.994667-29.994667 11.989333-29.994667-11.989333-11.989333-29.994667 11.989333-31.018667 29.994667-13.013333zM425.984 534.016q25.984 0 45.013333 18.986667t18.986667 45.013333-18.986667 45.013333-45.013333 18.986667-45.013333-18.986667-18.986667-45.013333 18.986667-45.013333 45.013333-18.986667zM425.984 297.984q-18.005333 0-29.994667-11.989333t-11.989333-29.994667 11.989333-29.994667 29.994667-11.989333 31.018667 11.989333 13.013333 29.994667-13.013333 29.994667-31.018667 11.989333zM425.984 150.016q-20.010667 0-20.010667-22.016t20.010667-22.016q22.016 0 22.016 22.016t-22.016 22.016zM425.984 873.984q22.016 0 22.016 22.016t-22.016 22.016q-20.010667 0-20.010667-22.016t20.010667-22.016zM128 576q22.016 0 22.016 22.016 0 20.010667-22.016 20.010667t-22.016-20.010667q0-22.016 22.016-22.016zM598.016 150.016q-22.016 0-22.016-22.016t22.016-22.016q20.010667 0 20.010667 22.016t-20.010667 22.016zM598.016 297.984q-18.005333 0-31.018667-11.989333t-13.013333-29.994667 13.013333-29.994667 31.018667-11.989333 29.994667 11.989333 11.989333 29.994667-11.989333 29.994667-29.994667 11.989333zM896 448q-22.016 0-22.016-22.016 0-20.010667 22.016-20.010667t22.016 20.010667q0 22.016-22.016 22.016zM256 214.016q18.005333 0 29.994667 11.989333t11.989333 29.994667-11.989333 29.994667-29.994667 11.989333-29.994667-11.989333-11.989333-29.994667 11.989333-29.994667 29.994667-11.989333zM128 406.016q22.016 0 22.016 20.010667 0 22.016-22.016 22.016t-22.016-22.016q0-20.010667 22.016-20.010667zM256 384q18.005333 0 29.994667 11.989333t11.989333 29.994667-11.989333 31.018667-29.994667 13.013333-29.994667-13.013333-11.989333-31.018667 11.989333-29.994667 29.994667-11.989333zM256 726.016q18.005333 0 29.994667 11.989333t11.989333 29.994667-11.989333 29.994667-29.994667 11.989333-29.994667-11.989333-11.989333-29.994667 11.989333-29.994667 29.994667-11.989333zM256 553.984q18.005333 0 29.994667 13.013333t11.989333 31.018667-11.989333 29.994667-29.994667 11.989333-29.994667-11.989333-11.989333-29.994667 11.989333-31.018667 29.994667-13.013333z"/>
+      </IconBase>
+    );
+  }
+  Blur.displayName = 'Blur';
+
+  module.exports = Blur;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svglib/border-all.js b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/border-all.js
new file mode 100644
index 000000000..d06051645
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/border-all.js
@@ -0,0 +1,23 @@
+
+const React = require('react');
+  const IconBase = require('@ali/vu-icon-base');
+
+  function BorderAll(props) {
+    return (
+      <IconBase viewBox="0 0 20 20" {...props}>
+        <g id="Page-1" stroke="none" stroke-width="1" fillRule="evenodd">
+        <g transform="translate(-40.000000, -40.000000)">
+            <g transform="translate(40.000000, 40.000000)">
+                <g transform="translate(10.000000, 10.000000) rotate(270.000000) translate(-10.000000, -10.000000) ">
+                    <rect x="4" y="4" width="12" height="12"/>
+                    <path d="M0,-1.77635684e-15 L20,-1.77635684e-15 L20,20 L0,20 L0,-1.77635684e-15 Z M4,4 L16,4 L16,16 L4,16 L4,4 Z"/>
+                </g>
+            </g>
+        </g>
+    </g>
+      </IconBase>
+    );
+  }
+  BorderAll.displayName = 'BorderAll';
+
+  module.exports = BorderAll;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svglib/border-bottom.js b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/border-bottom.js
new file mode 100644
index 000000000..85214464e
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/border-bottom.js
@@ -0,0 +1,24 @@
+
+const React = require('react');
+  const IconBase = require('@ali/vu-icon-base');
+
+  function BorderBottom(props) {
+    return (
+      <IconBase viewBox="0 0 20 20" {...props}>
+        <g stroke="none" stroke-width="1" fillRule="evenodd">
+        <g transform="translate(-40.000000, -40.000000)">
+            <rect x="30" y="30" width="40" height="40"/>
+            <g transform="translate(40.000000, 40.000000)">
+                <g transform="translate(10.000000, 10.000000) rotate(180.000000) translate(-10.000000, -10.000000) ">
+                    <rect x="0" y="0" width="20" height="4"/>
+                    <rect x="0" y="4" width="20" height="16"/>
+                </g>
+            </g>
+        </g>
+    </g>
+      </IconBase>
+    );
+  }
+  BorderBottom.displayName = 'BorderBottom';
+
+  module.exports = BorderBottom;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svglib/border-left.js b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/border-left.js
new file mode 100644
index 000000000..ace58fc5d
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/border-left.js
@@ -0,0 +1,24 @@
+
+const React = require('react');
+  const IconBase = require('@ali/vu-icon-base');
+
+  function BorderLeft(props) {
+    return (
+      <IconBase viewBox="0 0 20 20" {...props}>
+        <g stroke="none" stroke-width="1" fillRule="evenodd">
+        <g transform="translate(-40.000000, -40.000000)">
+            <rect x="30" y="30" width="40" height="40"/>
+            <g transform="translate(40.000000, 40.000000)">
+                <g transform="translate(10.000000, 10.000000) rotate(270.000000) translate(-10.000000, -10.000000) ">
+                    <rect x="0" y="-1.77635684e-15" width="20" height="4"/>
+                    <rect x="0" y="4" width="20" height="16"/>
+                </g>
+            </g>
+        </g>
+    </g>
+      </IconBase>
+    );
+  }
+  BorderLeft.displayName = 'BorderLeft';
+
+  module.exports = BorderLeft;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svglib/border-right.js b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/border-right.js
new file mode 100644
index 000000000..bb727a02d
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/border-right.js
@@ -0,0 +1,24 @@
+
+const React = require('react');
+  const IconBase = require('@ali/vu-icon-base');
+
+  function BorderRight(props) {
+    return (
+      <IconBase viewBox="0 0 20 20" {...props}>
+        <g stroke="none" stroke-width="1" fillRule="evenodd">
+        <g transform="translate(-40.000000, -40.000000)">
+            <rect x="30" y="30" width="40" height="40"/>
+            <g transform="translate(40.000000, 40.000000)">
+                <g transform="translate(10.000000, 10.000000) rotate(90.000000) translate(-10.000000, -10.000000) ">
+                    <rect x="0" y="0" width="20" height="4"/>
+                    <rect x="0" y="4" width="20" height="16"/>
+                </g>
+            </g>
+        </g>
+    </g>
+      </IconBase>
+    );
+  }
+  BorderRight.displayName = 'BorderRight';
+
+  module.exports = BorderRight;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svglib/border-top.js b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/border-top.js
new file mode 100644
index 000000000..e9add2106
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/border-top.js
@@ -0,0 +1,23 @@
+
+const React = require('react');
+  const IconBase = require('@ali/vu-icon-base');
+
+  function BorderTop(props) {
+    return (
+      <IconBase viewBox="0 0 20 20" {...props}>
+        <g stroke="none" stroke-width="1" fillRule="evenodd">
+        <g transform="translate(-40.000000, -40.000000)">
+            <g transform="translate(40.000000, 40.000000)">
+                <g>
+                    <rect x="0" y="0" width="20" height="4"/>
+                    <rect x="0" y="4" width="20" height="16"/>
+                </g>
+            </g>
+        </g>
+    </g>
+      </IconBase>
+    );
+  }
+  BorderTop.displayName = 'BorderTop';
+
+  module.exports = BorderTop;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svglib/capitalize.js b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/capitalize.js
new file mode 100644
index 000000000..c505e48f1
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/capitalize.js
@@ -0,0 +1,14 @@
+
+const React = require('react');
+  const IconBase = require('@ali/vu-icon-base');
+
+  function Capitalize(props) {
+    return (
+      <IconBase viewBox="0 0 24 17" {...props}>
+        <path d="M14,4.34122179 L12.1548732,4.40671436 C12.1050287,3.43159789 12.246107,3.14728377 12.0280374,2.76160338 C11.8099678,2.37592298 11.5451729,2.10667844 11.2336449,1.95386168 C10.9221168,1.80104492 10.5545193,1.72463768 10.1308411,1.72463768 L8.44859813,1.72463768 L8.44859813,14.7295909 C8.44859813,15.3990739 9.00934019,15.7338103 10.1308411,15.7338103 L10.1308411,17 L3.90654206,17 L3.90654206,15.7338103 C5.01558187,15.7338103 5.57009346,15.3990739 5.57009346,14.7295909 L5.57009346,1.72463768 L3.86915888,1.72463768 C3.44548075,1.72463768 3.07788318,1.80104492 2.76635514,1.95386168 C2.4548271,2.10667844 2.19003224,2.37592298 1.97196262,2.76160338 C1.75389299,3.14728377 1.89497132,3.43159789 1.84512684,4.40671436 L0,4.34122179 L0,0 L14,0 L14,4.34122179 Z M20.6470588,3.95798319 L24,3.95798319 L23.8739496,5.77310924 C23.403359,5.6722684 22.903364,5.60084055 22.3739496,5.55882353 C21.8445352,5.51680651 21.2689107,5.49579832 20.6470588,5.49579832 L20.6470588,14.2941176 C20.6470588,15.0504239 21.016803,15.4285714 21.7563025,15.4285714 C22.1428591,15.4285714 22.4075623,15.3235305 22.5504202,15.1134454 C22.693278,14.9033603 22.7647059,14.6302538 22.7647059,14.2941176 L22.7647059,12.8319328 L24,12.8319328 L24,13.9411765 C24,14.3949603 23.953782,14.8067208 23.8613445,15.1764706 C23.7689071,15.5462203 23.6008416,15.8613432 23.3571429,16.1218487 C23.1134442,16.3823542 22.789918,16.5882345 22.3865546,16.7394958 C21.9831913,16.8907571 21.4705913,16.9663866 20.8487395,16.9663866 C19.5378086,16.9663866 18.6008432,16.6722718 18.0378151,16.0840336 C17.4747871,15.4957954 17.1932773,14.6722742 17.1932773,13.6134454 L17.1932773,5.49579832 L15,5.49579832 L15,4.28571429 C15.4705906,4.25210067 15.9117626,4.18487445 16.3235294,4.08403361 C16.7352962,3.98319277 17.0966371,3.80672395 17.407563,3.55462185 C17.7184889,3.30251975 17.962184,2.9495821 18.1386555,2.49579832 C18.3151269,2.04201454 18.4033613,1.45378513 18.4033613,0.731092437 L18.4033613,0.176470588 L20.6470588,0 L20.6470588,3.95798319 Z"/>
+      </IconBase>
+    );
+  }
+  Capitalize.displayName = 'Capitalize';
+
+  module.exports = Capitalize;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svglib/center.js b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/center.js
new file mode 100644
index 000000000..a93c7cfcd
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/center.js
@@ -0,0 +1,14 @@
+
+const React = require('react');
+  const IconBase = require('@ali/vu-icon-base');
+
+  function Center(props) {
+    return (
+      <IconBase viewBox="0 0 1024 1024" {...props}>
+        <path d="M0 472.615385h393.846154v78.76923H0zM630.153846 472.615385h393.846154v78.76923H630.153846zM472.615385 0h78.76923v393.846154h-78.76923zM472.615385 630.153846h78.76923v393.846154h-78.76923z"/>
+      </IconBase>
+    );
+  }
+  Center.displayName = 'Center';
+
+  module.exports = Center;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svglib/color.js b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/color.js
new file mode 100644
index 000000000..3a99d58e1
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/color.js
@@ -0,0 +1,15 @@
+
+const React = require('react');
+  const IconBase = require('@ali/vu-icon-base');
+
+  function Color(props) {
+    return (
+      <IconBase viewBox="0 0 21 17" {...props}>
+        <path d="M7.057923,6.94048365 C7.04979017,6.90724028 7.03471462,6.87699953 7.01408497,6.85190615 L4.23205608,1.83580276 L3.7688805,1 L3.30530819,1.83558828 L0.506021801,6.88386268 C0.49907913,6.8965166 0.493524987,6.90938501 0.489161015,6.92289683 C0.169202902,7.53478935 0,8.2260371 0,8.92500579 C0,11.1720434 1.69064045,13 3.76907885,13 C5.84712054,13 7.53795938,11.1720434 7.53795938,8.92500579 C7.53795938,8.23268578 7.37212861,7.54808671 7.057923,6.94048365 L7.057923,6.94048365 Z"/>
+  <path d="M14.296,10.288 L8.944,10.288 L7.408,14.152 C7.3279996,14.344001 7.288,14.5039994 7.288,14.632 C7.288,14.9680017 7.77599512,15.2079993 8.752,15.352 C8.86400056,15.3680001 8.9399998,15.4119996 8.98,15.484 C9.0200002,15.5560004 9.04,15.6399995 9.04,15.736 C9.04,15.8320005 9.02400016,15.9599992 8.992,16.12 C8.55999784,16.0879998 8.1040024,16.0600001 7.624,16.036 C7.1439976,16.0119999 6.67200232,16 6.208,16 C5.8879984,16 5.56000168,16.0079999 5.224,16.024 C4.88799832,16.0400001 4.53600184,16.0719998 4.168,16.12 C4.13599984,15.9919994 4.12,15.8640006 4.12,15.736 C4.12,15.6239994 4.1399998,15.5280004 4.18,15.448 C4.2200002,15.3679996 4.30399936,15.3200001 4.432,15.304 C4.92800248,15.2239996 5.29999876,15.1240006 5.548,15.004 C5.79600124,14.8839994 5.97599944,14.6960013 6.088,14.44 L11.872,0.52 C11.9840006,0.24799864 12.135999,0.112 12.328,0.112 C12.3920003,0.112 12.4879994,0.12799984 12.616,0.16 L18.424,14.512 C18.5200005,14.7360011 18.7359983,14.9119994 19.072,15.04 C19.4080017,15.1680006 19.7359984,15.2559998 20.056,15.304 C20.1520005,15.3360002 20.2279997,15.3799997 20.284,15.436 C20.3400003,15.4920003 20.368,15.5919993 20.368,15.736 C20.368,15.8320005 20.3520002,15.9599992 20.32,16.12 C19.8079974,16.0879998 19.3040025,16.0600001 18.808,16.036 C18.3119975,16.0119999 17.8480022,16 17.416,16 C16.9679978,16 16.4560029,16.0119999 15.88,16.036 C15.3039971,16.0600001 14.7840023,16.0879998 14.32,16.12 C14.2879998,15.9599992 14.272,15.8320005 14.272,15.736 C14.272,15.5919993 14.2999997,15.4920003 14.356,15.436 C14.4120003,15.3799997 14.4639998,15.352 14.512,15.352 C14.9280021,15.2719996 15.2639987,15.1800005 15.52,15.076 C15.7760013,14.9719995 15.904,14.816001 15.904,14.608 C15.904,14.5119995 15.8720003,14.3920007 15.808,14.248 L14.296,10.288 Z M13.912,9.304 L11.68,3.424 L9.352,9.304 L13.912,9.304 Z"/>
+      </IconBase>
+    );
+  }
+  Color.displayName = 'Color';
+
+  module.exports = Color;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svglib/contain.js b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/contain.js
new file mode 100644
index 000000000..a3207b648
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/contain.js
@@ -0,0 +1,17 @@
+
+const React = require('react');
+  const IconBase = require('@ali/vu-icon-base');
+
+  function Contain(props) {
+    return (
+      <IconBase viewBox="0 0 34 20" {...props}>
+        <g fillRule="evenodd">
+        <path d="M28,3 L28,17 L6,17 L6,3 L28,3 Z M10.6221729,13.9997445 C10.5839635,14.0888999 10.5584905,14.1907918 10.5584905,14.2799471 C10.5584905,14.3945754 10.5839635,14.5092038 10.6476459,14.6110956 C10.7622742,14.8021428 10.9660579,14.9167712 11.1825781,14.9167712 L22.518046,14.9167712 C22.7345662,14.9167712 22.9383499,14.8021428 23.0529782,14.6110956 C23.1166606,14.5092038 23.1421336,14.3945754 23.1421336,14.2799471 C23.1421336,14.1780553 23.1166606,14.0888999 23.0784512,13.9997445 L19.2702434,6.38332901 C19.1683516,6.17954532 18.9645679,6.05218051 18.7480477,6.03944403 L18.7098383,6.03944403 C18.4933181,6.03944403 18.3022709,6.14133587 18.1749061,6.3196466 L15.2455155,11.0066715 L14.1501781,9.18535479 C14.0355498,9.07072646 13.8699756,8.99430758 13.7044013,8.99430758 C13.6661919,8.99430758 13.6407189,8.99430758 13.6025095,9.00704406 C13.3987258,9.0452535 13.2331515,9.17261831 13.1312597,9.35092904 L10.6221729,13.9997445 L10.6221729,13.9997445 L10.6221729,13.9997445 Z M13.9279567,6.11938052 C13.9279567,5.20788931 13.1811928,4.46112543 12.2697016,4.46112543 C11.3582104,4.46112543 10.6114465,5.20788931 10.6114465,6.11938052 C10.6114465,7.03087172 11.3582104,7.7776356 12.2697016,7.7776356 C13.1811928,7.7776356 13.9279567,7.04185354 13.9279567,6.11938052 L13.9279567,6.11938052 L13.9279567,6.11938052 Z"/>
+        <path d="M0,0 L34,0 L34,20 L0,20 L0,0 Z M2,2 L32,2 L32,18 L2,18 L2,2 Z" opacity="0.6"/>
+    </g>
+      </IconBase>
+    );
+  }
+  Contain.displayName = 'Contain';
+
+  module.exports = Contain;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svglib/cover.js b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/cover.js
new file mode 100644
index 000000000..b2b0dd6ee
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/cover.js
@@ -0,0 +1,17 @@
+
+const React = require('react');
+  const IconBase = require('@ali/vu-icon-base');
+
+  function Cover(props) {
+    return (
+      <IconBase viewBox="0 0 34 23" {...props}>
+        <g fillRule="evenodd">
+        <path d="M31,3 L31,23 L3,23 L3,3 L31,3 Z M8.46071454,19.1879428 C8.40310965,19.3223542 8.36470639,19.4759672 8.36470639,19.6103786 C8.36470639,19.7831933 8.40310965,19.956008 8.49911781,20.1096211 C8.67193249,20.3976455 8.97915858,20.5704602 9.30558631,20.5704602 L26.3950378,20.5704602 C26.7214656,20.5704602 27.0286916,20.3976455 27.2015063,20.1096211 C27.2975145,19.956008 27.3359177,19.7831933 27.3359177,19.6103786 C27.3359177,19.4567656 27.2975145,19.3223542 27.2399096,19.1879428 L21.4986219,7.70536748 C21.3450089,7.39814138 21.0377828,7.20612507 20.7113551,7.18692344 L20.6537502,7.18692344 C20.3273225,7.18692344 20.039298,7.34053649 19.8472817,7.60935932 L15.4309066,14.6755595 L13.7795663,11.9297263 C13.6067516,11.7569116 13.3571304,11.6417018 13.1075092,11.6417018 C13.0499043,11.6417018 13.0115011,11.6417018 12.9538962,11.6609034 C12.6466701,11.7185083 12.3970489,11.9105246 12.2434358,12.1793475 L8.46071454,19.1879428 L8.46071454,19.1879428 L8.46071454,19.1879428 Z M13.4445433,7.3074364 C13.4445433,5.93326421 12.3187155,4.8074364 10.9445433,4.8074364 C9.57037111,4.8074364 8.4445433,5.93326421 8.4445433,7.3074364 C8.4445433,8.68160858 9.57037111,9.8074364 10.9445433,9.8074364 C12.3187155,9.8074364 13.4445433,8.69816488 13.4445433,7.3074364 L13.4445433,7.3074364 L13.4445433,7.3074364 Z"/>
+        <path d="M0,0 L34,0 L34,20 L0,20 L0,0 Z M2,2 L32,2 L32,18 L2,18 L2,2 Z"/>
+    </g>
+      </IconBase>
+    );
+  }
+  Cover.displayName = 'Cover';
+
+  module.exports = Cover;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svglib/cursor-default.js b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/cursor-default.js
new file mode 100644
index 000000000..b00265943
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/cursor-default.js
@@ -0,0 +1,14 @@
+
+const React = require('react');
+  const IconBase = require('@ali/vu-icon-base');
+
+  function CursorDefault(props) {
+    return (
+      <IconBase viewBox="0 0 1024 1024" {...props}>
+        <path d="M256 0l612.650667 573.824-250.282667 22.741333-45.44 4.096 18.901333 41.557333 151.850667 332.544L631.68 1024l-144.896-336.128-18.176-42.368-33.578667 31.530667-177.792 166.741333L256 0"/>
+      </IconBase>
+    );
+  }
+  CursorDefault.displayName = 'CursorDefault';
+
+  module.exports = CursorDefault;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svglib/cursor-pointer.js b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/cursor-pointer.js
new file mode 100644
index 000000000..20410aa77
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/cursor-pointer.js
@@ -0,0 +1,15 @@
+
+const React = require('react');
+  const IconBase = require('@ali/vu-icon-base');
+
+  function CursorPointer(props) {
+    return (
+      <IconBase viewBox="0 0 1024 1024" {...props}>
+        <path d="M426.666667 85.333333C473.6 85.333333 512 123.733333 512 170.666667L512 362.666667C512 362.666667 597.333333 352 597.333333 394.666667 597.333333 394.666667 682.666667 384 682.666667 426.666667 682.666667 426.666667 768 416 768 458.666667 768 458.666667 853.333333 448 853.333333 490.666667L853.333333 640C853.333333 682.666667 725.333333 896 725.333333 938.666667L384 938.666667C384 938.666667 298.666667 640 170.666667 554.666667 170.666667 554.666667 128 298.666667 341.333333 512L341.333333 170.666667C341.333333 123.733333 379.733333 85.333333 426.666667 85.333333Z">
+  </path>
+      </IconBase>
+    );
+  }
+  CursorPointer.displayName = 'CursorPointer';
+
+  module.exports = CursorPointer;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svglib/cursor.js b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/cursor.js
new file mode 100644
index 000000000..8bbaf206b
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/cursor.js
@@ -0,0 +1,15 @@
+
+const React = require('react');
+  const IconBase = require('@ali/vu-icon-base');
+
+  function Cursor(props) {
+    return (
+      <IconBase viewBox="0 0 1024 1024" {...props}>
+        <path d="M597.333333 981.333333C597.333333 981.333333 597.333333 981.333333 597.333333 981.333333c-17.066667 0-34.133333-12.8-38.4-29.866667l-98.133333-294.4c-8.533333-21.333333 4.266667-46.933333 25.6-55.466667 21.333333-8.533333 46.933333 4.266667 55.466667 25.6l59.733333 183.466667 260.266667-652.8L209.066667 422.4l183.466667 59.733333c21.333333 8.533333 34.133333 29.866667 25.6 55.466667-8.533333 21.333333-29.866667 34.133333-55.466667 25.6l-294.4-98.133333C55.466667 460.8 42.666667 443.733333 42.666667 426.666667c0-17.066667 8.533333-34.133333 25.6-42.666667l853.333333-341.333333C938.666667 38.4 955.733333 42.666667 968.533333 55.466667 981.333333 68.266667 985.6 85.333333 977.066667 102.4l-341.333333 853.333333C631.466667 972.8 614.4 981.333333 597.333333 981.333333z"/>
+  <path d="M170.666667 981.333333c-34.133333 0-64-12.8-89.6-38.4-51.2-51.2-51.2-132.266667 0-179.2l268.8-268.8c17.066667-17.066667 42.666667-17.066667 59.733333 0s17.066667 42.666667 0 59.733333l-268.8 268.8C132.266667 832 128 840.533333 128 853.333333s4.266667 21.333333 12.8 29.866667c17.066667 17.066667 42.666667 17.066667 59.733333 0l268.8-268.8c17.066667-17.066667 42.666667-17.066667 59.733333 0s17.066667 42.666667 0 59.733333l-268.8 268.8C234.666667 968.533333 204.8 981.333333 170.666667 981.333333z"/>
+      </IconBase>
+    );
+  }
+  Cursor.displayName = 'Cursor';
+
+  module.exports = Cursor;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svglib/dir.js b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/dir.js
new file mode 100644
index 000000000..439352a0c
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/dir.js
@@ -0,0 +1,14 @@
+
+const React = require('react');
+  const IconBase = require('@ali/vu-icon-base');
+
+  function Dir(props) {
+    return (
+      <IconBase viewBox="0 0 1024 1024" {...props}>
+        <path d="M814.622854 508.742816 514.923074 145.338133 209.3751 508.742816 448.612832 508.742816 448.612832 878.661867 575.386144 878.661867 575.386144 508.742816Z"/>
+      </IconBase>
+    );
+  }
+  Dir.displayName = 'Dir';
+
+  module.exports = Dir;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svglib/direction-column.js b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/direction-column.js
new file mode 100644
index 000000000..78f8e118e
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/direction-column.js
@@ -0,0 +1,14 @@
+
+const React = require('react');
+  const IconBase = require('@ali/vu-icon-base');
+
+  function DirectionColumn(props) {
+    return (
+      <IconBase viewBox="0 0 9 18" {...props}>
+        <g fillRule="evenodd"><path d="M0 6h9v5H0zm5 9v-3H4v3H2l2.5 3L7 15H5z"/><path opacity=".4" d="M1 1h7v3H1z"/><path d="M1 1v3h7V1H1zM0 0h9v5H0V0z"/></g>
+      </IconBase>
+    );
+  }
+  DirectionColumn.displayName = 'DirectionColumn';
+
+  module.exports = DirectionColumn;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svglib/direction-row.js b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/direction-row.js
new file mode 100644
index 000000000..9832498a5
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/direction-row.js
@@ -0,0 +1,14 @@
+
+const React = require('react');
+  const IconBase = require('@ali/vu-icon-base');
+
+  function DirectionRow(props) {
+    return (
+      <IconBase viewBox="0 0 19 9" {...props}>
+        <g fillRule="evenodd"><path d="M16 4h-4v1h4v2l3-2.5L16 2v2zM6 0h5v9H6z"/><path opacity=".4" d="M1 1h3v7H1z"/><path d="M1 1v7h3V1H1zM0 0h5v9H0V0z"/></g>
+      </IconBase>
+    );
+  }
+  DirectionRow.displayName = 'DirectionRow';
+
+  module.exports = DirectionRow;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svglib/fill.js b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/fill.js
new file mode 100644
index 000000000..01510345f
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/fill.js
@@ -0,0 +1,14 @@
+
+const React = require('react');
+  const IconBase = require('@ali/vu-icon-base');
+
+  function Fill(props) {
+    return (
+      <IconBase viewBox="0 0 1024 1024" {...props}>
+        <path d="M881.2544 1004.3392c-50.9952 0-92.3648-41.3696-92.3648-92.3648 0-50.9952 92.3648-215.6544 92.3648-215.6544s92.3648 164.6592 92.3648 215.6544S932.4544 1004.3392 881.2544 1004.3392L881.2544 1004.3392zM50.3808 546.6112 449.9456 151.552l399.7696 395.264-399.7696 395.264L50.3808 546.6112 50.3808 546.6112zM449.9456 239.2064l-277.0944 272.384 554.3936 0L449.9456 239.2064 449.9456 239.2064zM272.384 63.488l44.4416-43.8272L449.9456 151.552 405.504 195.3792 272.384 63.488 272.384 63.488zM272.384 63.488"/>
+      </IconBase>
+    );
+  }
+  Fill.displayName = 'Fill';
+
+  module.exports = Fill;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svglib/fixed.js b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/fixed.js
new file mode 100644
index 000000000..7074b7d4e
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/fixed.js
@@ -0,0 +1,14 @@
+
+const React = require('react');
+  const IconBase = require('@ali/vu-icon-base');
+
+  function Fixed(props) {
+    return (
+      <IconBase viewBox="0 0 1024 1024" {...props}>
+        <path d="M314.816 666.624l-187.52-198.72 177.792 44.096 285.952-265.024L591.04 129.152l305.472 309.248L760.832 431.04 516.16 732.928l29.184 161.984L365.184 710.848l-233.472 183.552L314.816 666.624z"/>
+      </IconBase>
+    );
+  }
+  Fixed.displayName = 'Fixed';
+
+  module.exports = Fixed;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svglib/flex.js b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/flex.js
new file mode 100644
index 000000000..cbe46a7a2
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/flex.js
@@ -0,0 +1,14 @@
+
+const React = require('react');
+  const IconBase = require('@ali/vu-icon-base');
+
+  function Flex(props) {
+    return (
+      <IconBase viewBox="0 0 23 14" {...props}>
+        <g fillRule="evenodd"><path d="M21 2v10H2V2h19zm1-1H1v12h21V1z" opacity=".15"/><path d="M1.2 0A1.2 1.2 0 0 0 0 1.2v11.6A1.2 1.2 0 0 0 1.2 14h20.6a1.2 1.2 0 0 0 1.2-1.2V1.2A1.2 1.2 0 0 0 21.8 0H1.2zM22 13H1V1h21v12z"/><path opacity=".4" d="M3 3h5v8H3z"/><path d="M4 4v6h3V4H4zm4-1v8H3V3h5z"/><path opacity=".4" d="M9 3h5v8H9z"/><path d="M10 4v6h3V4h-3zm4-1v8H9V3h5z"/><path opacity=".4" d="M15 3h5v8h-5z"/><path d="M16 4v6h3V4h-3zm4-1v8h-5V3h5z"/></g>
+      </IconBase>
+    );
+  }
+  Flex.displayName = 'Flex';
+
+  module.exports = Flex;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svglib/font-family.js b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/font-family.js
new file mode 100644
index 000000000..d4c0581f3
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/font-family.js
@@ -0,0 +1,14 @@
+
+const React = require('react');
+  const IconBase = require('@ali/vu-icon-base');
+
+  function FontFamily(props) {
+    return (
+      <IconBase viewBox="0 0 29 19" {...props}>
+        <path d="M11.856,10.008 L12,9.72 L13.392,9.672 C13.8880025,8.69599512 14.4599968,7.85600352 15.108,7.152 C15.7560032,6.44799648 16.4719961,5.84400252 17.256,5.34 C18.0400039,4.83599748 18.8879954,4.41200172 19.8,4.068 C20.7120046,3.72399828 21.6799949,3.42400128 22.704,3.168 L22.704,3.12 C22.2239976,3.12 21.7360025,3.11200008 21.24,3.096 C20.7439975,3.07999992 20.2160028,3.06400008 19.656,3.048 C19.0959972,3.03199992 18.4880033,3.01600008 17.832,3 C17.1759967,2.98399992 16.448004,2.976 15.648,2.976 C14.655995,2.976 13.6400052,3.00399972 12.6,3.06 C11.5599948,3.11600028 10.5480049,3.21999924 9.564,3.372 C8.57999508,3.52400076 7.6480044,3.72799872 6.768,3.984 C5.8879956,4.24000128 5.12400324,4.56399804 4.476,4.956 C3.82799676,5.34800196 3.31200192,5.81199732 2.928,6.348 C2.54399808,6.88400268 2.352,7.51999632 2.352,8.256 C2.352,8.78400264 2.4719988,9.2279982 2.712,9.588 C2.9520012,9.9480018 3.2519982,10.2359989 3.612,10.452 C3.9720018,10.6680011 4.3719978,10.8199996 4.812,10.908 C5.2520022,10.9960004 5.671998,11.04 6.072,11.04 C6.6320028,11.04 7.2519966,10.9520009 7.932,10.776 C8.6120034,10.5999991 9.25599696,10.3400017 9.864,9.996 C10.472003,9.65199828 10.979998,9.2200026 11.388,8.7 C11.796002,8.1799974 12,7.58400336 12,6.912 C12,6.5919984 11.9720003,6.28000152 11.916,5.976 C11.8599997,5.67199848 11.7680006,5.37600144 11.64,5.088 L11.856,4.968 C11.9360004,5.11200072 12.0279995,5.34799836 12.132,5.676 C12.2360005,6.00400164 12.288,6.4479972 12.288,7.008 C12.288,7.808004 12.1000019,8.53599672 11.724,9.192 C11.3479981,9.84800328 10.860003,10.4079977 10.26,10.872 C9.659997,11.3360023 8.99200368,11.6959987 8.256,11.952 C7.51999632,12.2080013 6.7920036,12.336 6.072,12.336 C5.5919976,12.336 5.1120024,12.2480009 4.632,12.072 C4.1519976,11.8959991 3.712002,11.6400017 3.312,11.304 C2.911998,10.9679983 2.58800124,10.5560024 2.34,10.068 C2.09199876,9.57999756 1.968,9.02400312 1.968,8.4 C1.968,7.32799464 2.25599712,6.392004 2.832,5.592 C3.40800288,4.791996 4.15999536,4.10800284 5.088,3.54 C6.01600464,2.97199716 7.06799412,2.50000188 8.244,2.124 C9.42000588,1.74799812 10.603994,1.45200108 11.796,1.236 C12.988006,1.01999892 14.1399944,0.8720004 15.252,0.792 C16.3640056,0.7119996 17.3119961,0.672 18.096,0.672 C19.2160056,0.672 20.2159956,0.67999992 21.096,0.696 C21.9760044,0.71200008 22.7639965,0.73199988 23.46,0.756 C24.1560035,0.78000012 24.7759973,0.80399988 25.32,0.828 C25.8640027,0.85200012 26.3599978,0.864 26.808,0.864 C26.9840009,0.864 27.1839989,0.8839998 27.408,0.924 C27.6320011,0.9640002 27.839999,1.03199952 28.032,1.128 C28.224001,1.22400048 28.3879993,1.34799924 28.524,1.5 C28.6600007,1.65200076 28.728,1.83999888 28.728,2.064 C28.728,2.36800152 28.624001,2.61199908 28.416,2.796 C28.207999,2.98000092 27.9520015,3.11599956 27.648,3.204 C27.3439985,3.29200044 27.0320016,3.34799988 26.712,3.372 C26.3919984,3.39600012 26.1200011,3.408 25.896,3.408 C25.7199991,3.408 25.5200011,3.40000008 25.296,3.384 C25.0719989,3.36799992 24.8480011,3.35200008 24.624,3.336 C24.3999989,3.31999992 24.188001,3.30400008 23.988,3.288 C23.787999,3.27199992 23.6240006,3.264 23.496,3.264 C22.7599963,3.264 22.0560034,3.48799776 21.384,3.936 C20.7119966,4.38400224 20.0880029,4.93199676 19.512,5.58 C18.9359971,6.22800324 18.4240022,6.91599636 17.976,7.644 C17.5279978,8.37200364 17.1440016,9.0159972 16.824,9.576 C17.3360026,9.52799976 17.7719982,9.4640004 18.132,9.384 C18.4920018,9.3039996 18.7599991,9.20800056 18.936,9.096 C19.0160004,9.04799976 19.0999996,8.96000064 19.188,8.832 C19.2760004,8.70399936 19.3679995,8.56800072 19.464,8.424 C19.5600005,8.27999928 19.6599995,8.15200056 19.764,8.04 C19.8680005,7.92799944 19.9759994,7.872 20.088,7.872 L22.728,7.872 C21.6719947,8.73600432 20.6800046,9.66399504 19.752,10.656 C18.8239954,11.648005 17.9920037,12.7199942 17.256,13.872 L17.04,13.896 C17.1840007,13.1599963 17.4079985,12.4480034 17.712,11.76 C18.0160015,11.0719966 18.3279984,10.3840034 18.648,9.696 C18.4239989,9.696 18.1240019,9.72799968 17.748,9.792 C17.3719981,9.85600032 17.0240016,9.89599992 16.704,9.912 C16.0799969,11.1440062 15.3920038,12.2679949 14.64,13.284 C13.8879962,14.3000051 13.0400047,15.1719964 12.096,15.9 C11.1519953,16.6280036 10.0960058,17.191998 8.928,17.592 C7.75999416,17.992002 6.44800728,18.192 4.992,18.192 C4.5119976,18.192 4.0120026,18.1400005 3.492,18.036 C2.9719974,17.9319995 2.49600216,17.7600012 2.064,17.52 C1.63199784,17.2799988 1.2760014,16.964002 0.996,16.572 C0.7159986,16.179998 0.576,15.6960029 0.576,15.12 C0.576,14.8799988 0.62399952,14.6520011 0.72,14.436 C0.81600048,14.2199989 0.93999924,14.0280008 1.092,13.86 C1.24400076,13.6919992 1.42799892,13.5560005 1.644,13.452 C1.86000108,13.3479995 2.0879988,13.296 2.328,13.296 C2.74400208,13.296 3.09999852,13.4199988 3.396,13.668 C3.69200148,13.9160012 3.84,14.2559978 3.84,14.688 C3.84,15.0560018 3.74800092,15.3679987 3.564,15.624 C3.37999908,15.8800013 3.12000168,16.0639994 2.784,16.176 C2.88000048,16.8320033 3.1479978,17.2839988 3.588,17.532 C4.0280022,17.7800012 4.55199696,17.904 5.16,17.904 C6.24800544,17.904 7.18799604,17.6320027 7.98,17.088 C8.77200396,16.5439973 9.47599692,15.872004 10.092,15.072 C10.7080031,14.271996 11.2639975,13.4120046 11.76,12.492 C12.2560025,11.5719954 12.7439976,10.7280038 13.224,9.96 L11.856,10.008 Z"/>
+      </IconBase>
+    );
+  }
+  FontFamily.displayName = 'FontFamily';
+
+  module.exports = FontFamily;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svglib/font-size.js b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/font-size.js
new file mode 100644
index 000000000..1ab6eac3f
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/font-size.js
@@ -0,0 +1,14 @@
+
+const React = require('react');
+  const IconBase = require('@ali/vu-icon-base');
+
+  function FontSize(props) {
+    return (
+      <IconBase viewBox="0 0 25 17" {...props}>
+        <path d="M5.194,7.474 L5.194,14.95 C5.194,15.1646677 5.28266578,15.3163329 5.46,15.405 C5.63733422,15.4936671 5.9359979,15.5613331 6.356,15.608 C6.45866718,15.608 6.51,15.6826659 6.51,15.832 C6.51,15.8973337 6.50066676,15.9766662 6.482,16.07 C6.18333184,16.0513332 5.86833499,16.0350001 5.537,16.021 C5.20566501,16.0069999 4.87200168,16 4.536,16 C4.2093317,16 3.87566837,16.0069999 3.535,16.021 C3.19433163,16.0350001 2.87466816,16.0513332 2.576,16.07 C2.55733324,15.9766662 2.548,15.8973337 2.548,15.832 C2.548,15.7013327 2.5946662,15.6266668 2.688,15.608 C3.1080021,15.5519997 3.4113324,15.4820004 3.598,15.398 C3.7846676,15.3139996 3.878,15.1646677 3.878,14.95 L3.878,7.474 L2.436,7.474 C2.1559986,7.474 1.92033429,7.50199972 1.729,7.558 C1.53766571,7.61400028 1.3720007,7.69799944 1.232,7.81 C1.0919993,7.92200056 0.97066718,8.06666578 0.868,8.244 C0.76533282,8.42133422 0.65800056,8.6266655 0.546,8.86 C0.52733324,8.9066669 0.49700021,8.93933324 0.455,8.958 C0.41299979,8.97666676 0.37333352,8.986 0.336,8.986 C0.23333282,8.986 0.14466704,8.95800028 0.07,8.902 C0.1633338,8.56599832 0.2333331,8.26733464 0.28,8.006 C0.3266669,7.74466536 0.36866648,7.52766753 0.406,7.355 C0.44333352,7.18233247 0.48299979,7.0493338 0.525,6.956 C0.56700021,6.8626662 0.6346662,6.816 0.728,6.816 C0.79333366,6.816 0.88666606,6.82066662 1.008,6.83 C1.12933394,6.83933338 1.25766599,6.84866662 1.393,6.858 C1.52833401,6.86733338 1.6659993,6.87666662 1.806,6.886 C1.9460007,6.89533338 2.07666606,6.9 2.198,6.9 L6.874,6.9 C6.98600056,6.9 7.1119993,6.89533338 7.252,6.886 C7.3920007,6.87666662 7.5319993,6.86733338 7.672,6.858 C7.8120007,6.84866662 7.94033275,6.83933338 8.057,6.83 C8.17366725,6.82066662 8.26933296,6.816 8.344,6.816 C8.4373338,6.816 8.50499979,6.86499951 8.547,6.963 C8.58900021,7.06100049 8.62866648,7.19866578 8.666,7.376 C8.70333352,7.55333422 8.74299979,7.77266536 8.785,8.034 C8.82700021,8.29533464 8.89933282,8.58466508 9.002,8.902 C8.9553331,8.92066676 8.91100021,8.93933324 8.869,8.958 C8.82699979,8.97666676 8.77800028,8.986 8.722,8.986 C8.68466648,8.986 8.6426669,8.97666676 8.596,8.958 C8.5493331,8.93933324 8.51666676,8.9066669 8.498,8.86 C8.39533282,8.6266655 8.29266718,8.42133422 8.19,8.244 C8.08733282,8.06666578 7.96833401,7.92200056 7.833,7.81 C7.69766599,7.69799944 7.53433429,7.61400028 7.343,7.558 C7.15166571,7.50199972 6.9160014,7.474 6.636,7.474 L5.194,7.474 Z M17.962,1.384 L17.962,14.2 C17.962,14.5680018 18.1139985,14.8279992 18.418,14.98 C18.7220015,15.1320008 19.2339964,15.2479996 19.954,15.328 C20.1300009,15.328 20.218,15.4559987 20.218,15.712 C20.218,15.8240006 20.2020002,15.9599992 20.17,16.12 C19.6579974,16.0879998 19.1180028,16.0600001 18.55,16.036 C17.9819972,16.0119999 17.4100029,16 16.834,16 C16.2739972,16 15.7020029,16.0119999 15.118,16.036 C14.5339971,16.0600001 13.9860026,16.0879998 13.474,16.12 C13.4419998,15.9599992 13.426,15.8240006 13.426,15.712 C13.426,15.4879989 13.5059992,15.3600002 13.666,15.328 C14.3860036,15.2319995 14.9059984,15.1120007 15.226,14.968 C15.5460016,14.8239993 15.706,14.5680018 15.706,14.2 L15.706,1.384 L13.234,1.384 C12.7539976,1.384 12.3500016,1.43199952 12.022,1.528 C11.6939984,1.62400048 11.4100012,1.76799904 11.17,1.96 C10.9299988,2.15200096 10.7220009,2.39999848 10.546,2.704 C10.3699991,3.00800152 10.186001,3.359998 9.994,3.76 C9.96199984,3.8400004 9.91000036,3.89599984 9.838,3.928 C9.76599964,3.96000016 9.69800032,3.976 9.634,3.976 C9.45799912,3.976 9.30600064,3.92800048 9.178,3.832 C9.3380008,3.25599712 9.4579996,2.74400224 9.538,2.296 C9.6180004,1.84799776 9.68999968,1.47600148 9.754,1.18 C9.81800032,0.88399852 9.88599964,0.6560008 9.958,0.496 C10.0300004,0.3359992 10.1459992,0.256 10.306,0.256 C10.4180006,0.256 10.577999,0.26399992 10.786,0.28 C10.994001,0.29600008 11.2139988,0.31199992 11.446,0.328 C11.6780012,0.34400008 11.9139988,0.35999992 12.154,0.376 C12.3940012,0.39200008 12.617999,0.4 12.826,0.4 L20.842,0.4 C21.034001,0.4 21.2499988,0.39200008 21.49,0.376 C21.7300012,0.35999992 21.9699988,0.34400008 22.21,0.328 C22.4500012,0.31199992 22.669999,0.29600008 22.87,0.28 C23.070001,0.26399992 23.2339994,0.256 23.362,0.256 C23.5220008,0.256 23.6379996,0.33999916 23.71,0.508 C23.7820004,0.67600084 23.8499997,0.91199848 23.914,1.216 C23.9780003,1.52000152 24.0459996,1.89599776 24.118,2.344 C24.1900004,2.79200224 24.3139991,3.28799728 24.49,3.832 C24.4099996,3.86400016 24.3340004,3.89599984 24.262,3.928 C24.1899996,3.96000016 24.1060005,3.976 24.01,3.976 C23.9459997,3.976 23.8740004,3.96000016 23.794,3.928 C23.7139996,3.89599984 23.6580002,3.8400004 23.626,3.76 C23.4499991,3.359998 23.2740009,3.00800152 23.098,2.704 C22.9219991,2.39999848 22.7180012,2.15200096 22.486,1.96 C22.2539988,1.76799904 21.9740016,1.62400048 21.646,1.528 C21.3179984,1.43199952 20.9140024,1.384 20.434,1.384 L17.962,1.384 Z"/>
+      </IconBase>
+    );
+  }
+  FontSize.displayName = 'FontSize';
+
+  module.exports = FontSize;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svglib/font-style.js b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/font-style.js
new file mode 100644
index 000000000..1321bc336
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/font-style.js
@@ -0,0 +1,14 @@
+
+const React = require('react');
+  const IconBase = require('@ali/vu-icon-base');
+
+  function FontStyle(props) {
+    return (
+      <IconBase viewBox="0 0 29 18" {...props}>
+        <path d="M16.2109375,16.4257812 L16.0234375,17.1171875 C15.6171855,17.0859373 15.2109395,17.0625001 14.8046875,17.046875 C14.1640593,17.0156248 13.5546904,17 12.9765625,17 C12.0078077,17 10.6953208,17.0390621 9.0390625,17.1171875 L9.1796875,16.4257812 C10.5546944,16.1445298 11.3320304,15.8398454 11.5117188,15.5117188 C11.6132818,15.3476554 11.7187495,14.8750039 11.828125,14.09375 C11.9375005,13.3124961 12.0156248,12.6093781 12.0625,11.984375 C11.1406204,11.9531248 9.99610059,11.9375 8.62890625,11.9375 C8.0195282,11.9375 7.50781457,11.9531248 7.09375,11.984375 C6.99999953,12.1093756 6.93164084,12.1992185 6.88867187,12.2539062 C6.84570291,12.308594 6.78515664,12.3867182 6.70703125,12.4882812 C6.54296793,12.7070323 6.18554963,13.1914025 5.63476562,13.9414062 C5.08398162,14.69141 4.79687512,15.0859373 4.7734375,15.125 C4.51562371,15.4453141 4.38671875,15.6796868 4.38671875,15.828125 C4.38671875,15.9453131 4.4414057,16.0351559 4.55078125,16.0976562 C4.6601568,16.1601566 4.98827852,16.2460932 5.53515625,16.3554688 C5.76953242,16.402344 5.89062496,16.4257812 5.8984375,16.4257812 L5.69921875,17.1171875 C5.4492175,17.1015624 5.02734672,17.0781252 4.43359375,17.046875 C3.8242157,17.0156248 3.32812691,17 2.9453125,17 C2.42968492,17 1.53516262,17.0390621 0.26171875,17.1171875 L0.47265625,16.4257812 C1.2617227,16.2851555 1.80663912,16.1230478 2.10742188,15.9394531 C2.40820463,15.7558585 2.81640367,15.3320346 3.33203125,14.6679688 C3.42578172,14.5351556 3.63085779,14.2675801 3.94726562,13.8652344 C4.26367346,13.4628886 4.54882686,13.0976579 4.80273437,12.7695312 C5.05664189,12.4414046 5.29296766,12.1406264 5.51171875,11.8671875 L7.0703125,9.8984375 C7.80469117,8.97655789 8.34179518,8.3007834 8.68164062,7.87109375 C9.02148607,7.4414041 9.37695127,6.98633053 9.74804688,6.50585938 C10.1191425,6.02538822 10.6230437,5.35742615 11.2597656,4.50195312 C11.8964876,3.6464801 12.7578071,2.48438234 13.84375,1.015625 C13.8984378,0.960937227 13.976562,0.863281953 14.078125,0.72265625 C14.179688,0.582030547 14.2460936,0.488281484 14.2773437,0.44140625 L15.0625,0.44140625 C15.0546875,0.566406875 15.0175785,0.98241834 14.9511719,1.68945312 C14.8847653,2.39648791 14.8281252,3.00390371 14.78125,3.51171875 C14.7265622,3.98828363 14.6640629,4.57421527 14.59375,5.26953125 C14.5234371,5.96484723 14.4687502,6.55663818 14.4296875,7.04492188 C14.3906248,7.53320557 14.3417972,8.17577727 14.2832031,8.97265625 C14.2246091,9.76953523 14.1406255,10.8710867 14.03125,12.2773438 C13.9218745,14.0429776 13.8671875,15.05078 13.8671875,15.3007812 C13.8671875,15.4726571 13.9023434,15.6074214 13.9726562,15.7050781 C14.0429691,15.8027349 14.2324203,15.9062495 14.5410156,16.015625 C14.8496109,16.1250005 15.2968721,16.2382807 15.8828125,16.3554688 C16.1171887,16.402344 16.2265626,16.4257812 16.2109375,16.4257812 L16.2109375,16.4257812 Z M7.9140625,10.859375 L12.1796875,10.859375 L12.90625,4.1796875 L12.859375,4.1328125 L7.9140625,10.859375 Z M27.6132812,14.140625 L28,14.6445312 C27.5312477,15.1132836 27.0175809,15.5624979 26.4589844,15.9921875 C25.9003878,16.4218771 25.4062521,16.7539051 24.9765625,16.9882812 C24.5468729,17.2226574 24.2421884,17.3398438 24.0625,17.3398438 C23.6953107,17.3398438 23.5117188,17.1132835 23.5117188,16.6601562 C23.5117188,16.4414052 23.5761712,16.0800806 23.7050781,15.5761719 C23.833985,15.0722631 23.9218748,14.7851566 23.96875,14.7148438 C24.0390629,14.4335923 24.1171871,14.1640638 24.203125,13.90625 L24.15625,13.859375 C23.4999967,14.6953167 22.7656291,15.4843713 21.953125,16.2265625 C21.1406209,16.9687537 20.4023471,17.3398438 19.7382812,17.3398438 C19.2148411,17.3398438 18.7617207,17.0839869 18.3789062,16.5722656 C17.9960918,16.0605443 17.8046875,15.3164111 17.8046875,14.3398438 C17.8046875,13.3398388 18.0136698,12.3476612 18.4316406,11.3632812 C18.8496115,10.3789013 19.4257776,9.49219145 20.1601562,8.703125 C20.8945349,7.91405855 21.7421827,7.28320549 22.703125,6.81054688 C23.6640673,6.33788826 24.6757759,6.1015625 25.7382812,6.1015625 C25.8632819,6.1015625 26.2441374,6.14062461 26.8808594,6.21875 C27.5175813,6.29687539 27.882812,6.33984371 27.9765625,6.34765625 L28.1171875,6.62890625 C27.6640602,7.56641094 27.2382832,8.63671273 26.8398438,9.83984375 C26.4414043,11.0429748 26.1230481,12.1249952 25.8847656,13.0859375 C25.6464832,14.0468798 25.5273438,14.6171866 25.5273438,14.796875 C25.5273438,15.1171891 25.624999,15.2773438 25.8203125,15.2773438 C26.0703138,15.2773438 26.5820274,14.9726593 27.3554688,14.3632812 C27.4804694,14.2382806 27.566406,14.1640626 27.6132812,14.140625 L27.6132812,14.140625 Z M25.9140625,7.42578125 C25.312497,7.23046777 24.8398455,7.1328125 24.4960938,7.1328125 C23.8554655,7.1328125 23.2460966,7.33007615 22.6679688,7.72460938 C22.0898409,8.1191426 21.5781272,8.6542935 21.1328125,9.33007812 C20.6874978,10.0058628 20.3359388,10.7617146 20.078125,11.5976562 C19.8203112,12.4335979 19.6914062,13.2578084 19.6914062,14.0703125 C19.6914062,14.6875031 19.7949208,15.1425767 20.0019531,15.4355469 C20.2089854,15.7285171 20.4179677,15.875 20.6289062,15.875 C20.9335953,15.875 21.4003875,15.6171901 22.0292969,15.1015625 C22.6582063,14.5859349 23.2421848,13.9218791 23.78125,13.109375 C24.1328143,12.60156 24.4257801,12.0332063 24.6601562,11.4042969 C24.8945324,10.7753875 25.2304666,9.710945 25.6679688,8.2109375 C25.6835938,8.1718748 25.724609,8.04687605 25.7910156,7.8359375 C25.8574222,7.62499895 25.8984374,7.48828156 25.9140625,7.42578125 L25.9140625,7.42578125 Z"/>
+      </IconBase>
+    );
+  }
+  FontStyle.displayName = 'FontStyle';
+
+  module.exports = FontStyle;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svglib/font-weight.js b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/font-weight.js
new file mode 100644
index 000000000..ed3af0f22
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/font-weight.js
@@ -0,0 +1,16 @@
+
+const React = require('react');
+  const IconBase = require('@ali/vu-icon-base');
+
+  function FontWeight(props) {
+    return (
+      <IconBase viewBox="0 0 30 17" {...props}>
+        <path d="M10.296,10.288 L4.944,10.288 L3.408,14.152 C3.3279996,14.344001 3.288,14.5039994 3.288,14.632 C3.288,14.9680017 3.77599512,15.2079993 4.752,15.352 C4.86400056,15.3680001 4.9399998,15.4119996 4.98,15.484 C5.0200002,15.5560004 5.04,15.6399995 5.04,15.736 C5.04,15.8320005 5.02400016,15.9599992 4.992,16.12 C4.55999784,16.0879998 4.1040024,16.0600001 3.624,16.036 C3.1439976,16.0119999 2.67200232,16 2.208,16 C1.8879984,16 1.56000168,16.0079999 1.224,16.024 C0.88799832,16.0400001 0.53600184,16.0719998 0.168,16.12 C0.13599984,15.9919994 0.12,15.8640006 0.12,15.736 C0.12,15.6239994 0.1399998,15.5280004 0.18,15.448 C0.2200002,15.3679996 0.30399936,15.3200001 0.432,15.304 C0.92800248,15.2239996 1.29999876,15.1240006 1.548,15.004 C1.79600124,14.8839994 1.97599944,14.6960013 2.088,14.44 L7.872,0.52 C7.98400056,0.24799864 8.13599904,0.112 8.328,0.112 C8.39200032,0.112 8.48799936,0.12799984 8.616,0.16 L14.424,14.512 C14.5200005,14.7360011 14.7359983,14.9119994 15.072,15.04 C15.4080017,15.1680006 15.7359984,15.2559998 16.056,15.304 C16.1520005,15.3360002 16.2279997,15.3799997 16.284,15.436 C16.3400003,15.4920003 16.368,15.5919993 16.368,15.736 C16.368,15.8320005 16.3520002,15.9599992 16.32,16.12 C15.8079974,16.0879998 15.3040025,16.0600001 14.808,16.036 C14.3119975,16.0119999 13.8480022,16 13.416,16 C12.9679978,16 12.4560029,16.0119999 11.88,16.036 C11.3039971,16.0600001 10.7840023,16.0879998 10.32,16.12 C10.2879998,15.9599992 10.272,15.8320005 10.272,15.736 C10.272,15.5919993 10.2999997,15.4920003 10.356,15.436 C10.4120003,15.3799997 10.4639998,15.352 10.512,15.352 C10.9280021,15.2719996 11.2639987,15.1800005 11.52,15.076 C11.7760013,14.9719995 11.904,14.816001 11.904,14.608 C11.904,14.5119995 11.8720003,14.3920007 11.808,14.248 L10.296,10.288 Z M9.912,9.304 L7.68,3.424 L5.352,9.304 L9.912,9.304 Z" opacity="0.7"/>
+    <path d="M16.296,10.288 L10.944,10.288 L9.408,14.152 C9.3279996,14.344001 9.288,14.5039994 9.288,14.632 C9.288,14.9680017 9.77599512,15.2079993 10.752,15.352 C10.8640006,15.3680001 10.9399998,15.4119996 10.98,15.484 C11.0200002,15.5560004 11.04,15.6399995 11.04,15.736 C11.04,15.8320005 11.0240002,15.9599992 10.992,16.12 C10.5599978,16.0879998 10.1040024,16.0600001 9.624,16.036 C9.1439976,16.0119999 8.67200232,16 8.208,16 C7.8879984,16 7.56000168,16.0079999 7.224,16.024 C6.88799832,16.0400001 6.53600184,16.0719998 6.168,16.12 C6.13599984,15.9919994 6.12,15.8640006 6.12,15.736 C6.12,15.6239994 6.1399998,15.5280004 6.18,15.448 C6.2200002,15.3679996 6.30399936,15.3200001 6.432,15.304 C6.92800248,15.2239996 7.29999876,15.1240006 7.548,15.004 C7.79600124,14.8839994 7.97599944,14.6960013 8.088,14.44 L13.872,0.52 C13.9840006,0.24799864 14.135999,0.112 14.328,0.112 C14.3920003,0.112 14.4879994,0.12799984 14.616,0.16 L20.424,14.512 C20.5200005,14.7360011 20.7359983,14.9119994 21.072,15.04 C21.4080017,15.1680006 21.7359984,15.2559998 22.056,15.304 C22.1520005,15.3360002 22.2279997,15.3799997 22.284,15.436 C22.3400003,15.4920003 22.368,15.5919993 22.368,15.736 C22.368,15.8320005 22.3520002,15.9599992 22.32,16.12 C21.8079974,16.0879998 21.3040025,16.0600001 20.808,16.036 C20.3119975,16.0119999 19.8480022,16 19.416,16 C18.9679978,16 18.4560029,16.0119999 17.88,16.036 C17.3039971,16.0600001 16.7840023,16.0879998 16.32,16.12 C16.2879998,15.9599992 16.272,15.8320005 16.272,15.736 C16.272,15.5919993 16.2999997,15.4920003 16.356,15.436 C16.4120003,15.3799997 16.4639998,15.352 16.512,15.352 C16.9280021,15.2719996 17.2639987,15.1800005 17.52,15.076 C17.7760013,14.9719995 17.904,14.816001 17.904,14.608 C17.904,14.5119995 17.8720003,14.3920007 17.808,14.248 L16.296,10.288 Z M15.912,9.304 L13.68,3.424 L11.352,9.304 L15.912,9.304 Z" opacity="0.9"/>
+    <path d="M22.96,10.72 L17.92,10.72 L16.672,14.056 C16.6239998,14.1360004 16.5920001,14.2239995 16.576,14.32 C16.5599999,14.4160005 16.552,14.4879998 16.552,14.536 C16.552,14.7120009 16.6359992,14.8559994 16.804,14.968 C16.9720008,15.0800006 17.3119974,15.1759996 17.824,15.256 C18.0480011,15.2880002 18.16,15.4399986 18.16,15.712 C18.16,15.8240006 18.1440002,15.9599992 18.112,16.12 C17.6799978,16.0879998 17.2240024,16.0600001 16.744,16.036 C16.2639976,16.0119999 15.7920023,16 15.328,16 C15.0079984,16 14.6720018,16.0079999 14.32,16.024 C13.9679982,16.0400001 13.5760022,16.0719998 13.144,16.12 C13.1119998,16.0559997 13.096,15.9840004 13.096,15.904 L13.096,15.712 C13.096,15.4079985 13.199999,15.2480001 13.408,15.232 C13.9040025,15.1359995 14.2599989,15.0320006 14.476,14.92 C14.6920011,14.8079994 14.8639994,14.6160014 14.992,14.344 L20.776,0.52 C20.9040006,0.24799864 21.0959987,0.112 21.352,0.112 C21.4320004,0.112 21.5119996,0.11599996 21.592,0.124 C21.6720004,0.13200004 21.7599995,0.14399992 21.856,0.16 L27.64,14.416 C27.7360005,14.6560012 27.9199986,14.8359994 28.192,14.956 C28.4640014,15.0760006 28.7599984,15.1599998 29.08,15.208 C29.3200012,15.2560002 29.44,15.4159986 29.44,15.688 C29.44,15.8160006 29.4240002,15.9599992 29.392,16.12 C28.8799974,16.0879998 28.3760025,16.0600001 27.88,16.036 C27.3839975,16.0119999 26.9200022,16 26.488,16 C26.2639989,16 25.9920016,16.004 25.672,16.012 C25.3519984,16.02 25.0240017,16.0319999 24.688,16.048 C24.3519983,16.0640001 24.0200016,16.076 23.692,16.084 C23.3639984,16.092 23.0880011,16.1039999 22.864,16.12 C22.8319998,16.0559997 22.816,15.9840004 22.816,15.904 L22.816,15.712 C22.816,15.5679993 22.8439997,15.4600004 22.9,15.388 C22.9560003,15.3159996 23.0159997,15.2720001 23.08,15.256 C23.4960021,15.1759996 23.803999,15.0840005 24.004,14.98 C24.204001,14.8759995 24.304,14.720001 24.304,14.512 C24.304,14.4159995 24.2800002,14.2960007 24.232,14.152 L22.96,10.72 Z M22.504,9.52 L20.464,4.12 L18.376,9.52 L22.504,9.52 Z"/>
+      </IconBase>
+    );
+  }
+  FontWeight.displayName = 'FontWeight';
+
+  module.exports = FontWeight;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svglib/handle.js b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/handle.js
new file mode 100644
index 000000000..582b09b06
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/handle.js
@@ -0,0 +1,14 @@
+
+const React = require('react');
+  const IconBase = require('@ali/vu-icon-base');
+
+  function Handle(props) {
+    return (
+      <IconBase viewBox="0 0 1566 1024" {...props}>
+        <path d="M445.44 291.84h675.84v153.6H445.44zM220.16 578.56h1126.4v153.6H220.16zM0 870.4h1566.72v153.6H0zM670.72 0h230.4v153.6h-230.4z"/>
+      </IconBase>
+    );
+  }
+  Handle.displayName = 'Handle';
+
+  module.exports = Handle;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svglib/height.js b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/height.js
new file mode 100644
index 000000000..58262f430
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/height.js
@@ -0,0 +1,15 @@
+
+const React = require('react');
+  const IconBase = require('@ali/vu-icon-base');
+
+  function Height(props) {
+    return (
+      <IconBase viewBox="0 0 1024 1024" {...props}>
+        <path d="M525.837333 51.733333c-3.406667-3.397333-8.109333-5.126667-13.228-4.874666l-0.348 0.017333-0.34-0.017333c-5.110667-0.252-9.813333 1.477333-13.245333 4.892l-103.454667 103.053333-4.902666 4.986667-26.517334 26.425333-9.621333 9.626667c-3.789333 3.789333-5.876 8.733333-5.876 13.912 0 4.710667 1.773333 9.08 5.006667 12.313333 5.414667 5.396 13.724 6.516 20.92 2.901333l36.817333-36.677333 4.902667-4.978667 78.857333-78.550666v343.032c0 9.576 7.822667 17.370667 17.453333 17.370666 9.629333 0 17.46-7.794667 17.46-17.370666V104.754667l86.88 86.553333h-0.008l30.924 30.813333c6.910667 5.421333 16.757333 4.804 23.050667-1.478666a17.365333 17.365333 0 0 0 5.128-12.354667c0-4.632-1.8-8.985333-5.076-12.253333L650.533333 175.973333l-17.956-17.882666 0.008-0.008-106.748-106.346667zM178.666667 0h666.666666v40H178.666667z"/>
+  <path d="M525.837333 972.266667c-3.406667 3.397333-8.109333 5.126667-13.228 4.874666l-0.348-0.017333-0.34 0.017333c-5.110667 0.252-9.813333-1.477333-13.245333-4.892l-103.454667-103.053333-4.902666-4.986667-26.517334-26.425333-9.621333-9.626667c-3.789333-3.789333-5.876-8.733333-5.876-13.912 0-4.710667 1.773333-9.08 5.006667-12.313333 5.414667-5.396 13.724-6.516 20.92-2.901333l36.817333 36.677333 4.902667 4.978667 78.857333 78.550666V576.205333c0-9.576 7.822667-17.370667 17.453333-17.370666 9.629333 0 17.46 7.794667 17.46 17.370666v343.04l86.88-86.553333h-0.008l30.924-30.813333c6.910667-5.421333 16.757333-4.804 23.050667 1.478666a17.365333 17.365333 0 0 1 5.128 12.354667c0 4.632-1.8 8.985333-5.076 12.253333L650.533333 848.026667l-17.956 17.882666 0.008 0.008-106.748 106.346667zM178.666667 1024h666.666666v-40H178.666667z"/>
+      </IconBase>
+    );
+  }
+  Height.displayName = 'Height';
+
+  module.exports = Height;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svglib/image.js b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/image.js
new file mode 100644
index 000000000..488f381da
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/image.js
@@ -0,0 +1,15 @@
+
+const React = require('react');
+  const IconBase = require('@ali/vu-icon-base');
+
+  function Image(props) {
+    return (
+      <IconBase viewBox="0 0 1024 1024" {...props}>
+        <path d="M736 448c53 0 96-43 96-96 0-53-43-96-96-96-53 0-96 43-96 96C640 405 683 448 736 448z"/>
+  <path d="M904 128 120 128c-31.2 0-56 25.4-56 56.6l0 654.8c0 31.2 24.8 56.6 56 56.6l784 0c31.2 0 56-25.4 56-56.6L960 184.6C960 153.4 935.2 128 904 128zM697.8 523.4c-6-7-15.2-12.4-25.6-12.4-10.2 0-17.4 4.8-25.6 11.4l-37.4 31.6c-7.8 5.6-14 9.4-23 9.4-8.6 0-16.4-3.2-22-8.2-2-1.8-5.6-5.2-8.6-8.2L448 430.6c-8-9.2-20-15-33.4-15-13.4 0-25.8 6.6-33.6 15.6L128 736.4 128 215.4c2-13.6 12.6-23.4 26.2-23.4l715.4 0c13.8 0 25 10.2 25.8 24l0.6 520.8L697.8 523.4z"/>
+      </IconBase>
+    );
+  }
+  Image.displayName = 'Image';
+
+  module.exports = Image;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svglib/index.js b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/index.js
new file mode 100644
index 000000000..6725995f3
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/index.js
@@ -0,0 +1,90 @@
+module.exports = {
+  'align-baseline-v': require('./align-baseline-v'),
+  'align-baseline': require('./align-baseline'),
+  'align-center-v': require('./align-center-v'),
+  'align-center': require('./align-center'),
+  'align-end-v': require('./align-end-v'),
+  'align-end': require('./align-end'),
+  'align-start-v': require('./align-start-v'),
+  'align-start': require('./align-start'),
+  'align-stretch-v': require('./align-stretch-v'),
+  'align-stretch': require('./align-stretch'),
+  'auto': require('./auto'),
+  'block': require('./block'),
+  'blur': require('./blur'),
+  'border-all': require('./border-all'),
+  'border-bottom': require('./border-bottom'),
+  'border-left': require('./border-left'),
+  'border-right': require('./border-right'),
+  'border-top': require('./border-top'),
+  'capitalize': require('./capitalize'),
+  'center': require('./center'),
+  'color': require('./color'),
+  'contain': require('./contain'),
+  'cover': require('./cover'),
+  'cursor-default': require('./cursor-default'),
+  'cursor-pointer': require('./cursor-pointer'),
+  'cursor': require('./cursor'),
+  'dir': require('./dir'),
+  'direction-column': require('./direction-column'),
+  'direction-row': require('./direction-row'),
+  'fill': require('./fill'),
+  'fixed': require('./fixed'),
+  'flex': require('./flex'),
+  'font-family': require('./font-family'),
+  'font-size': require('./font-size'),
+  'font-style': require('./font-style'),
+  'font-weight': require('./font-weight'),
+  'handle': require('./handle'),
+  'height': require('./height'),
+  'image': require('./image'),
+  'inline-block': require('./inline-block'),
+  'inline': require('./inline'),
+  'italic': require('./italic'),
+  'justify-around-v': require('./justify-around-v'),
+  'justify-around': require('./justify-around'),
+  'justify-between-v': require('./justify-between-v'),
+  'justify-between': require('./justify-between'),
+  'justify-center-v': require('./justify-center-v'),
+  'justify-center': require('./justify-center'),
+  'justify-end-v': require('./justify-end-v'),
+  'justify-end': require('./justify-end'),
+  'justify-start-v': require('./justify-start-v'),
+  'justify-start': require('./justify-start'),
+  'layer': require('./layer'),
+  'letter-spacing': require('./letter-spacing'),
+  'line-height': require('./line-height'),
+  'line-through': require('./line-through'),
+  'lowercase': require('./lowercase'),
+  'no': require('./no'),
+  'none': require('./none'),
+  'normal': require('./normal'),
+  'offset': require('./offset'),
+  'opacity': require('./opacity'),
+  'repeat-a': require('./repeat-a'),
+  'repeat-x': require('./repeat-x'),
+  'repeat-y': require('./repeat-y'),
+  'repeat': require('./repeat'),
+  'text-align-center': require('./text-align-center'),
+  'text-align-justify': require('./text-align-justify'),
+  'text-align-left': require('./text-align-left'),
+  'text-align': require('./text-align'),
+  'text-decoration': require('./text-decoration'),
+  'text-indent': require('./text-indent'),
+  'text-transform': require('./text-transform'),
+  'underline': require('./underline'),
+  'uppercase': require('./uppercase'),
+  'wrap-around-v': require('./wrap-around-v'),
+  'wrap-around': require('./wrap-around'),
+  'wrap-between-v': require('./wrap-between-v'),
+  'wrap-between': require('./wrap-between'),
+  'wrap-center-v': require('./wrap-center-v'),
+  'wrap-center': require('./wrap-center'),
+  'wrap-end-v': require('./wrap-end-v'),
+  'wrap-end': require('./wrap-end'),
+  'wrap-start-v': require('./wrap-start-v'),
+  'wrap-start': require('./wrap-start'),
+  'wrap-stretch-v': require('./wrap-stretch-v'),
+  'wrap-stretch': require('./wrap-stretch'),
+  'yes': require('./yes'),
+};
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svglib/inline-block.js b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/inline-block.js
new file mode 100644
index 000000000..d80b4c047
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/inline-block.js
@@ -0,0 +1,16 @@
+
+const React = require('react');
+  const IconBase = require('@ali/vu-icon-base');
+
+  function InlineBlock(props) {
+    return (
+      <IconBase viewBox="0 0 28 14" {...props}>
+        <path d="M25 3v8H3V3h22m1-1H2v10h24V2z" opacity=".15"/>
+  <path opacity=".35" d="M8.418 9.8H7.66L7.25 11h1.58l-.232-.676-.18-.525zM3 11h.567l2.916-7.94h3.15L11 6.78V3H3v8zm15.12-1.002a3.302 3.302 0 0 1-.48-.586c-.173.343-.42.653-.73.888.002 0 .004-.002.005-.003l-.008.006.003-.003a3.145 3.145 0 0 1-1.092.55c-.4.11-.825.15-1.303.15h6.017a4.416 4.416 0 0 1-1.12-.215 3.51 3.51 0 0 1-1.292-.787zM14.237 3c.49 0 .853.014 1.167.06.335.05.656.16.953.314h.003l.004.003c.365.19.694.492.898.866.13.234.197.49.24.747.16-.298.343-.58.578-.82v-.002c.358-.366.8-.643 1.287-.826a4.373 4.373 0 0 1 1.557-.272 5.67 5.67 0 0 1 1.442.18l.01.002.01.003c.205.06.4.126.59.208.15.064.283.125.407.185l.562.274v3.016h-1.54l-.28-.24a7.018 7.018 0 0 0-.233-.188 2.703 2.703 0 0 0-.26-.175 1.594 1.594 0 0 0-.277-.125h-.006l-.2-.03a.772.772 0 0 0-.26.042l-.16.102a.63.63 0 0 0-.13.22 1.486 1.486 0 0 0-.075.516c0 .266.04.436.074.513a.59.59 0 0 0 .13.212l.15.09h.003a.868.868 0 0 0 .265.045l.236-.037h.008a1.04 1.04 0 0 0 .25-.113l.007-.004.01-.005.24-.16a6.41 6.41 0 0 0 .216-.17l.285-.254h1.536v3.017l-.59.266c-.15.066-.292.13-.422.184a4.19 4.19 0 0 1-.53.19 5.918 5.918 0 0 1-.636.15c-.076.012-.16.02-.24.026H25V3H14.237z"/>
+  <path d="M25.8 1H2.2A1.2 1.2 0 0 0 1 2.2v9.6A1.2 1.2 0 0 0 2.2 13h23.6a1.2 1.2 0 0 0 1.2-1.2V2.2A1.2 1.2 0 0 0 25.8 1zm.2 11H2V2h24v10zm-7.186-2.72c.258.248.567.435.927.56s.76.19 1.18.19c.29 0 .51-.014.68-.042.167-.028.34-.07.53-.123.143-.04.28-.09.41-.146l.412-.19V8.16h-.154c-.07.06-.157.134-.265.22a3.337 3.337 0 0 1-.35.237 2.11 2.11 0 0 1-.485.22 1.798 1.798 0 0 1-1.1-.01 1.403 1.403 0 0 1-.523-.3c-.15-.14-.28-.33-.38-.57a2.36 2.36 0 0 1-.152-.9c0-.347.047-.64.14-.88s.216-.433.367-.58c.157-.15.33-.26.517-.325a1.786 1.786 0 0 1 1.116-.014c.164.056.316.125.457.206a4.868 4.868 0 0 1 .644.466h.17V4.54a13.03 13.03 0 0 0-.367-.168 3.667 3.667 0 0 0-1.005-.27 4.736 4.736 0 0 0-.65-.04c-.436 0-.837.07-1.205.207s-.675.333-.924.59c-.26.262-.457.58-.59.95S18 6.6 18 7.055c0 .488.07.918.213 1.29s.343.683.6.933zm-3.264.607c.272-.076.52-.2.75-.38.195-.15.35-.338.46-.567.113-.23.17-.488.17-.778 0-.4-.11-.722-.332-.967-.22-.245-.52-.406-.896-.484v-.03a1.46 1.46 0 0 0 .623-.51 1.36 1.36 0 0 0 .22-.77c0-.25-.052-.47-.16-.665a1.15 1.15 0 0 0-.49-.465 2.065 2.065 0 0 0-.64-.215A7.67 7.67 0 0 0 14.237 4H12v6h2.515c.418 0 .763-.037 1.035-.113zM13.478 5.1h.14c.29 0 .517.002.678.006s.296.027.404.07c.12.05.206.123.253.223a.69.69 0 0 1 .072.29.86.86 0 0 1-.062.34c-.042.1-.13.18-.263.24a1.05 1.05 0 0 1-.39.08c-.166.007-.366.01-.6.01h-.233V5.1zm.108 3.8h-.108V7.405h.324c.222 0 .434 0 .638.004.203 0 .363.02.48.05.17.05.29.13.36.23s.106.25.106.44c0 .144-.03.272-.087.384s-.17.2-.32.27a1.257 1.257 0 0 1-.5.104c-.18.003-.48.004-.9.004zm-6.64-.1h2.187l.41 1.2h1.574L8.935 4.06H7.182L5 10h1.535l.412-1.2zM8.04 5.58l.727 2.13H7.313l.727-2.13z"/>
+      </IconBase>
+    );
+  }
+  InlineBlock.displayName = 'InlineBlock';
+
+  module.exports = InlineBlock;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svglib/inline.js b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/inline.js
new file mode 100644
index 000000000..22878dee5
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/inline.js
@@ -0,0 +1,14 @@
+
+const React = require('react');
+  const IconBase = require('@ali/vu-icon-base');
+
+  function Inline(props) {
+    return (
+      <IconBase viewBox="0 0 20 8" {...props}>
+        <path d="M14.814 6.25c.258.248.567.435.927.56s.76.19 1.18.19c.29 0 .51-.014.68-.042.167-.028.34-.07.53-.123.143-.04.28-.09.41-.146l.41-.19V5.13h-.153c-.07.06-.157.134-.265.22a3.337 3.337 0 0 1-.35.237 2.11 2.11 0 0 1-.484.22 1.798 1.798 0 0 1-1.1-.01 1.403 1.403 0 0 1-.523-.3 1.566 1.566 0 0 1-.38-.57c-.1-.24-.152-.54-.152-.9 0-.346.048-.638.14-.878s.217-.437.368-.58c.16-.155.33-.26.52-.33a1.786 1.786 0 0 1 1.117-.013c.165.055.317.124.458.205a4.385 4.385 0 0 1 .643.47h.17V1.52c-.107-.05-.23-.107-.37-.168a3.613 3.613 0 0 0-1.003-.27 4.736 4.736 0 0 0-.65-.04c-.436 0-.837.07-1.205.207s-.674.33-.923.59c-.26.26-.458.58-.59.95S14 3.57 14 4.02c0 .488.07.918.213 1.29s.343.683.6.933zm-3.264.608c.272-.075.52-.2.75-.377a1.5 1.5 0 0 0 .46-.56 1.72 1.72 0 0 0 .17-.77c0-.4-.11-.72-.332-.96-.22-.244-.52-.404-.896-.48v-.04a1.46 1.46 0 0 0 .623-.516c.147-.22.22-.474.22-.763 0-.25-.052-.47-.16-.66a1.152 1.152 0 0 0-.49-.46 2.06 2.06 0 0 0-.64-.212A7.67 7.67 0 0 0 10.237 1H8v5.97h2.515c.418 0 .763-.037 1.035-.112zM9.478 2.095h.14c.29 0 .517.002.678.006.162.01.296.03.404.07a.46.46 0 0 1 .253.23.69.69 0 0 1 .072.298.85.85 0 0 1-.062.34.492.492 0 0 1-.263.24 1.052 1.052 0 0 1-.39.08c-.166.006-.366.01-.6.01h-.232v-1.27zm.108 3.78h-.108V4.388h.324c.222 0 .434 0 .638.004a1.8 1.8 0 0 1 .48.056c.17.05.29.127.36.23.07.104.106.25.106.44 0 .144-.03.272-.087.383s-.17.2-.32.27-.32.1-.5.11c-.18.004-.48.004-.9.004zm-6.64-.106h2.187l.41 1.2h1.574L4.935 1.03H3.182L1 6.97h1.535l.412-1.2zM4.04 2.55l.727 2.13H3.313l.727-2.13z"/>
+      </IconBase>
+    );
+  }
+  Inline.displayName = 'Inline';
+
+  module.exports = Inline;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svglib/italic.js b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/italic.js
new file mode 100644
index 000000000..fa5e94d1a
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/italic.js
@@ -0,0 +1,14 @@
+
+const React = require('react');
+  const IconBase = require('@ali/vu-icon-base');
+
+  function Italic(props) {
+    return (
+      <IconBase viewBox="0 0 13 18" {...props}>
+        <path d="M12.2851562,0.78125 L12.0625,1.49609375 C12.0468749,1.50390629 12.0039066,1.51367182 11.9335938,1.52539062 C11.8632809,1.53710943 11.791016,1.54882807 11.7167969,1.56054688 C11.6425778,1.57226568 11.5976563,1.58203121 11.5820312,1.58984375 C10.824215,1.73046945 10.3281262,1.86523373 10.09375,1.99414062 C9.85937383,2.12304752 9.68359434,2.31640496 9.56640625,2.57421875 C9.3554677,3.10547141 9.05664256,3.99022818 8.66992188,5.22851562 C8.28320119,6.46680307 7.8945332,7.7636651 7.50390625,9.11914062 C7.1132793,10.4746162 6.80859484,11.5976518 6.58984375,12.4882812 C6.58203121,12.5273439 6.45312625,13.0390576 6.203125,14.0234375 C5.95312375,15.0078174 5.828125,15.5351559 5.828125,15.6054688 C5.828125,15.7226568 5.87499953,15.8203121 5.96875,15.8984375 C6.03125031,15.9531253 6.60546332,16.1054675 7.69140625,16.3554688 C7.94922004,16.402344 8.078125,16.4257812 8.078125,16.4257812 L7.8671875,17.1171875 C7.49218562,17.0937499 7.02734652,17.0703126 6.47265625,17.046875 C5.70702742,17.0156248 5.00390945,17 4.36328125,17 C3.32421355,17 2.14844406,17.0390621 0.8359375,17.1171875 L1.046875,16.4257812 C1.05468754,16.4257812 1.08203102,16.4199219 1.12890625,16.4082031 C1.17578148,16.3964843 1.23828086,16.3847657 1.31640625,16.3730469 C1.39453164,16.3613281 1.47265586,16.3476563 1.55078125,16.3320312 C2.25390977,16.1992181 2.71093645,16.0820318 2.921875,15.9804688 C3.13281355,15.8789057 3.30859305,15.7304697 3.44921875,15.5351562 C3.62890715,15.2617174 3.98827855,14.2070404 4.52734375,12.3710938 C4.55078137,12.2773433 4.69335807,11.7773483 4.95507812,10.8710938 C5.21679818,9.96483922 5.37890594,9.39843863 5.44140625,9.171875 C5.60546957,8.58593457 5.78320217,7.95898771 5.97460938,7.29101562 C6.16601658,6.62304354 6.30859328,6.10547059 6.40234375,5.73828125 C6.82422086,4.22264867 7.09374941,3.19140898 7.2109375,2.64453125 C7.2500002,2.52734316 7.26953125,2.41796926 7.26953125,2.31640625 C7.26953125,2.16015547 7.20312566,2.05468777 7.0703125,2 C6.99218711,1.9609373 6.68554955,1.87695377 6.15039062,1.74804688 C5.6152317,1.61913998 5.25000098,1.53515645 5.0546875,1.49609375 L5.2421875,0.78125 C6.50781883,0.875000469 7.65233863,0.921875 8.67578125,0.921875 C10.0820383,0.921875 11.2851513,0.875000469 12.2851562,0.78125 L12.2851562,0.78125 Z"/>
+      </IconBase>
+    );
+  }
+  Italic.displayName = 'Italic';
+
+  module.exports = Italic;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svglib/justify-around-v.js b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/justify-around-v.js
new file mode 100644
index 000000000..4d92b9e71
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/justify-around-v.js
@@ -0,0 +1,14 @@
+
+const React = require('react');
+  const IconBase = require('@ali/vu-icon-base');
+
+  function JustifyAroundV(props) {
+    return (
+      <IconBase viewBox="0 0 21 13" {...props}>
+        <g fillRule="evenodd"><path d="M0 2h21v1H0V2zm5.5 0h10v1h-10V2zM0 10h21v1H0v-1zm5.5 0h10v1h-10v-1z" opacity=".5"/><path d="M6 8h9v5H6z"/><path opacity=".4" d="M7 1h7v3H7z"/><path d="M7 1v3h7V1H7zM6 0h9v5H6V0z"/></g>
+      </IconBase>
+    );
+  }
+  JustifyAroundV.displayName = 'JustifyAroundV';
+
+  module.exports = JustifyAroundV;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svglib/justify-around.js b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/justify-around.js
new file mode 100644
index 000000000..382573577
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/justify-around.js
@@ -0,0 +1,14 @@
+
+const React = require('react');
+  const IconBase = require('@ali/vu-icon-base');
+
+  function JustifyAround(props) {
+    return (
+      <IconBase viewBox="0 0 16 17" {...props}>
+        <g fillRule="evenodd"><path d="M2 0h1v17H2V0zm0 3.5h1v10H2v-10zM13 0h1v17h-1V0zm0 3.5h1v10h-1v-10z" opacity=".5"/><path d="M11 4h5v9h-5z"/><path opacity=".4" d="M1 5h3v7H1z"/><path d="M1 5v7h3V5H1zM0 4h5v9H0V4z"/></g>
+      </IconBase>
+    );
+  }
+  JustifyAround.displayName = 'JustifyAround';
+
+  module.exports = JustifyAround;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svglib/justify-between-v.js b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/justify-between-v.js
new file mode 100644
index 000000000..52d77a26d
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/justify-between-v.js
@@ -0,0 +1,14 @@
+
+const React = require('react');
+  const IconBase = require('@ali/vu-icon-base');
+
+  function JustifyBetweenV(props) {
+    return (
+      <IconBase viewBox="0 0 21 18" {...props}>
+        <g fillRule="evenodd"><path opacity=".5" d="M0 0h21v1H0zm0 17h21v1H0z"/><path d="M6 11h9v5H6z"/><path opacity=".4" d="M7 3h7v3H7z"/><path d="M7 3v3h7V3H7zM6 2h9v5H6V2z"/></g>
+      </IconBase>
+    );
+  }
+  JustifyBetweenV.displayName = 'JustifyBetweenV';
+
+  module.exports = JustifyBetweenV;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svglib/justify-between.js b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/justify-between.js
new file mode 100644
index 000000000..51a8467be
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/justify-between.js
@@ -0,0 +1,14 @@
+
+const React = require('react');
+  const IconBase = require('@ali/vu-icon-base');
+
+  function JustifyBetween(props) {
+    return (
+      <IconBase viewBox="0 0 24 17" {...props}>
+        <g fillRule="evenodd"><path opacity=".5" d="M0 0h1v17H0zm23 0h1v17h-1z"/><path d="M17 4h5v9h-5z"/><path opacity=".4" d="M3 5h3v7H3z"/><path d="M3 5v7h3V5H3zM2 4h5v9H2V4z"/></g>
+      </IconBase>
+    );
+  }
+  JustifyBetween.displayName = 'JustifyBetween';
+
+  module.exports = JustifyBetween;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svglib/justify-center-v.js b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/justify-center-v.js
new file mode 100644
index 000000000..9d0f6eb77
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/justify-center-v.js
@@ -0,0 +1,14 @@
+
+const React = require('react');
+  const IconBase = require('@ali/vu-icon-base');
+
+  function JustifyCenterV(props) {
+    return (
+      <IconBase viewBox="0 0 21 13" {...props}>
+        <g fillRule="evenodd"><path opacity=".5" d="M0 6h21v1H0z"/><path d="M6 8h9v5H6z"/><path opacity=".4" d="M7 1h7v3H7z"/><path d="M7 1v3h7V1H7zM6 0h9v5H6V0z"/></g>
+      </IconBase>
+    );
+  }
+  JustifyCenterV.displayName = 'JustifyCenterV';
+
+  module.exports = JustifyCenterV;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svglib/justify-center.js b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/justify-center.js
new file mode 100644
index 000000000..82771442f
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/justify-center.js
@@ -0,0 +1,14 @@
+
+const React = require('react');
+  const IconBase = require('@ali/vu-icon-base');
+
+  function JustifyCenter(props) {
+    return (
+      <IconBase viewBox="0 0 13 17" {...props}>
+        <g fillRule="evenodd"><path opacity=".5" d="M6 0h1v17H6z"/><path d="M8 4h5v9H8z"/><path opacity=".4" d="M1 5h3v7H1z"/><path d="M1 5v7h3V5H1zM0 4h5v9H0V4z"/></g>
+      </IconBase>
+    );
+  }
+  JustifyCenter.displayName = 'JustifyCenter';
+
+  module.exports = JustifyCenter;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svglib/justify-end-v.js b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/justify-end-v.js
new file mode 100644
index 000000000..44904637f
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/justify-end-v.js
@@ -0,0 +1,14 @@
+
+const React = require('react');
+  const IconBase = require('@ali/vu-icon-base');
+
+  function JustifyEndV(props) {
+    return (
+      <IconBase viewBox="0 0 21 18" {...props}>
+        <g fillRule="evenodd"><path d="M6 11h9v5H6z"/><path opacity=".4" d="M7 6h7v3H7z"/><path d="M7 6v3h7V6H7zM6 5h9v5H6V5z"/><path opacity=".5" d="M0 17h21v1H0z"/></g>
+      </IconBase>
+    );
+  }
+  JustifyEndV.displayName = 'JustifyEndV';
+
+  module.exports = JustifyEndV;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svglib/justify-end.js b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/justify-end.js
new file mode 100644
index 000000000..193cf67bc
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/justify-end.js
@@ -0,0 +1,14 @@
+
+const React = require('react');
+  const IconBase = require('@ali/vu-icon-base');
+
+  function JustifyEnd(props) {
+    return (
+      <IconBase viewBox="0 0 24 17" {...props}>
+        <g fillRule="evenodd"><path opacity=".5" d="M23 0h1v17h-1z"/><path d="M17 4h5v9h-5z"/><path opacity=".4" d="M12 5h3v7h-3z"/><path d="M12 5v7h3V5h-3zm-1-1h5v9h-5V4z"/></g>
+      </IconBase>
+    );
+  }
+  JustifyEnd.displayName = 'JustifyEnd';
+
+  module.exports = JustifyEnd;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svglib/justify-start-v.js b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/justify-start-v.js
new file mode 100644
index 000000000..274931839
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/justify-start-v.js
@@ -0,0 +1,14 @@
+
+const React = require('react');
+  const IconBase = require('@ali/vu-icon-base');
+
+  function JustifyStartV(props) {
+    return (
+      <IconBase viewBox="0 0 21 18" {...props}>
+        <g fillRule="evenodd"><path opacity=".5" d="M0 0h21v1H0z"/><path d="M6 8h9v5H6z"/><path opacity=".4" d="M7 3h7v3H7z"/><path d="M7 3v3h7V3H7zM6 2h9v5H6V2z"/></g>
+      </IconBase>
+    );
+  }
+  JustifyStartV.displayName = 'JustifyStartV';
+
+  module.exports = JustifyStartV;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svglib/justify-start.js b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/justify-start.js
new file mode 100644
index 000000000..6f3a9a769
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/justify-start.js
@@ -0,0 +1,14 @@
+
+const React = require('react');
+  const IconBase = require('@ali/vu-icon-base');
+
+  function JustifyStart(props) {
+    return (
+      <IconBase viewBox="0 0 24 17" {...props}>
+        <g fillRule="evenodd"><path opacity=".5" d="M0 0h1v17H0z"/><path d="M8 4h5v9H8z"/><path opacity=".4" d="M3 5h3v7H3z"/><path d="M3 5v7h3V5H3zM2 4h5v9H2V4z"/></g>
+      </IconBase>
+    );
+  }
+  JustifyStart.displayName = 'JustifyStart';
+
+  module.exports = JustifyStart;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svglib/layer.js b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/layer.js
new file mode 100644
index 000000000..1d1950f40
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/layer.js
@@ -0,0 +1,14 @@
+
+const React = require('react');
+  const IconBase = require('@ali/vu-icon-base');
+
+  function Layer(props) {
+    return (
+      <IconBase viewBox="0 0 1024 1024" {...props}>
+        <path d="M512.28 881.25 124.847 579.972l-85.104 66.192 472.799 367.732 472.799-367.732-85.629-66.454C899.712 579.71 512.28 881.25 512.28 881.25zM512.542 747.816 899.45 447.063l85.892-66.98L512.542 12.351 39.743 380.083l85.629 66.454L512.542 747.816z"/>
+      </IconBase>
+    );
+  }
+  Layer.displayName = 'Layer';
+
+  module.exports = Layer;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svglib/letter-spacing.js b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/letter-spacing.js
new file mode 100644
index 000000000..4b9463555
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/letter-spacing.js
@@ -0,0 +1,15 @@
+
+const React = require('react');
+  const IconBase = require('@ali/vu-icon-base');
+
+  function LetterSpacing(props) {
+    return (
+      <IconBase viewBox="0 0 42 33" {...props}>
+        <path d="M16,21.86 L16,22 L18,22 L18,0 L16,0 L16,20.6992542 C15.1019614,20.6856486 14.588633,20.485899 14.46,20.1 L9.64,7 L6.74,7 L1.74,20.12 C1.673333,20.3066676 1.506668,20.4466662 1.24,20.54 C0.973332,20.6333338 0.5600028,20.68 0,20.68 L0,21.86 L5.46,21.86 L5.46,20.7 L4.22,20.7 C3.6333304,20.7 3.34,20.5266684 3.34,20.18 C3.34,20.0999996 3.3533332,20.0200004 3.38,19.94 L4.12,17.94 L10.26,17.94 L11.06,20.1 C11.1000002,20.2066672 11.12,20.2799998 11.12,20.32 C11.12,20.5733346 10.9266686,20.7 10.54,20.7 L8.78,20.7 L8.78,21.86 L16,21.86 Z M26,20.6037894 L26,0 L24,0 L24,22 L26,22 L26,21.86 L30.46,21.86 L30.46,20.7 L29.22,20.7 C28.6333304,20.7 28.34,20.5266684 28.34,20.18 C28.34,20.0999996 28.3533332,20.0200004 28.38,19.94 L29.12,17.94 L35.26,17.94 L36.06,20.1 C36.1000002,20.2066672 36.12,20.2799998 36.12,20.32 C36.12,20.5733346 35.9266686,20.7 35.54,20.7 L33.78,20.7 L33.78,21.86 L41.1,21.86 L41.1,20.7 C40.1399952,20.7 39.593334,20.500002 39.46,20.1 L34.64,7 L31.74,7 L26.74,20.12 C26.673333,20.3066676 26.506668,20.4466662 26.24,20.54 C26.1700821,20.5644712 26.0900822,20.5857344 26,20.6037894 Z M17.9759154,30 L17.9759154,33 L11,29 L17.9759154,25 L17.9759154,28 L24,28 L24,30 L17.9759154,30 Z M30.9759154,29 L24,33 L24,25 L30.9759154,29 Z M16,21.86 L16,20.6992542 C16.0328195,20.6997514 16.0661528,20.7 16.1,20.7 L16.1,21.86 L16,21.86 Z M30,16.04 L35.12,16.04 L32.58,9 L30,16.04 Z M5,16.04 L10.12,16.04 L7.58,9 L5,16.04 Z"/>
+    <rect opacity="0.5" x="18" y="0" width="6" height="22"/>
+      </IconBase>
+    );
+  }
+  LetterSpacing.displayName = 'LetterSpacing';
+
+  module.exports = LetterSpacing;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svglib/line-height.js b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/line-height.js
new file mode 100644
index 000000000..331abfec7
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/line-height.js
@@ -0,0 +1,14 @@
+
+const React = require('react');
+  const IconBase = require('@ali/vu-icon-base');
+
+  function LineHeight(props) {
+    return (
+      <IconBase viewBox="0 0 29 34" {...props}>
+        <path d="M5,27.8833008 L5,20 L3,20 L3,27.8833008 L0.457763672,27.8833008 L3.96508789,34 L7.47241211,27.8833008 L5,27.8833008 Z M9,14 L29,14 L29,16 L9,16 L9,14 Z M9,32 L29,32 L29,34 L9,34 L9,32 Z M3.96508789,13.8833008 L7.47241211,20 L0.457763672,20 L3.96508789,13.8833008 Z M21.015625,10.6054688 C20.2421836,11.1367214 19.5332063,11.5292956 18.8886719,11.7832031 C18.2441374,12.0371106 17.6406278,12.1640625 17.078125,12.1640625 C16.1484329,12.1640625 15.4042997,11.8828153 14.8457031,11.3203125 C14.2871066,10.7578097 14.0078125,10.0156296 14.0078125,9.09375 C14.0078125,8.07030738 14.4277302,7.26562793 15.2675781,6.6796875 C16.1074261,6.09374707 18.0234225,5.44140984 21.015625,4.72265625 L21.015625,3.9609375 C21.015625,2.95311996 20.8515641,2.2539082 20.5234375,1.86328125 C20.1953109,1.4726543 19.6250041,1.27734375 18.8125,1.27734375 C18.507811,1.27734375 18.2070327,1.30859344 17.9101562,1.37109375 C17.6132798,1.43359406 17.3046891,1.52734313 16.984375,1.65234375 L16.984375,3.66796875 L15.3320312,3.66796875 C15.0429673,3.66796875 14.8457037,3.6152349 14.7402344,3.50976563 C14.6347651,3.40429635 14.5820312,3.21093891 14.5820312,2.9296875 C14.5820312,2.14843359 15.0331986,1.50000258 15.9355469,0.984375 C16.8378951,0.468747422 18.0038991,0.2109375 19.4335938,0.2109375 C20.6914125,0.2109375 21.6054659,0.484372266 22.1757812,1.03125 C22.7460966,1.57812773 23.03125,2.4570252 23.03125,3.66796875 L23.03125,10.6289062 L23.4414062,11.015625 L24.7070312,11.1328125 L24.7070312,12 L21.3320312,12 L21.015625,10.6054688 Z M21.015625,9.796875 L21.015625,5.56640625 C19.0078025,6.12109652 17.6894563,6.62890395 17.0605469,7.08984375 C16.4316375,7.55078355 16.1171875,8.15624625 16.1171875,8.90625 C16.1171875,9.50781551 16.2910139,9.98632635 16.6386719,10.3417969 C16.9863299,10.6972674 17.4531221,10.875 18.0390625,10.875 C18.4140644,10.875 18.8457007,10.7851571 19.3339844,10.6054688 C19.8222681,10.4257804 20.3828093,10.1562518 21.015625,9.796875 Z M21.015625,28.6054688 C20.2421836,29.1367214 19.5332063,29.5292956 18.8886719,29.7832031 C18.2441374,30.0371106 17.6406278,30.1640625 17.078125,30.1640625 C16.1484329,30.1640625 15.4042997,29.8828153 14.8457031,29.3203125 C14.2871066,28.7578097 14.0078125,28.0156296 14.0078125,27.09375 C14.0078125,26.0703074 14.4277302,25.2656279 15.2675781,24.6796875 C16.1074261,24.0937471 18.0234225,23.4414098 21.015625,22.7226562 L21.015625,21.9609375 C21.015625,20.95312 20.8515641,20.2539082 20.5234375,19.8632812 C20.1953109,19.4726543 19.6250041,19.2773438 18.8125,19.2773438 C18.507811,19.2773438 18.2070327,19.3085934 17.9101562,19.3710938 C17.6132798,19.4335941 17.3046891,19.5273431 16.984375,19.6523438 L16.984375,21.6679688 L15.3320312,21.6679688 C15.0429673,21.6679688 14.8457037,21.6152349 14.7402344,21.5097656 C14.6347651,21.4042963 14.5820312,21.2109389 14.5820312,20.9296875 C14.5820312,20.1484336 15.0331986,19.5000026 15.9355469,18.984375 C16.8378951,18.4687474 18.0038991,18.2109375 19.4335938,18.2109375 C20.6914125,18.2109375 21.6054659,18.4843723 22.1757812,19.03125 C22.7460966,19.5781277 23.03125,20.4570252 23.03125,21.6679688 L23.03125,28.6289062 L23.4414062,29.015625 L24.7070312,29.1328125 L24.7070312,30 L21.3320312,30 L21.015625,28.6054688 Z M21.015625,27.796875 L21.015625,23.5664062 C19.0078025,24.1210965 17.6894563,24.6289039 17.0605469,25.0898438 C16.4316375,25.5507836 16.1171875,26.1562462 16.1171875,26.90625 C16.1171875,27.5078155 16.2910139,27.9863263 16.6386719,28.3417969 C16.9863299,28.6972674 17.4531221,28.875 18.0390625,28.875 C18.4140644,28.875 18.8457007,28.7851571 19.3339844,28.6054688 C19.8222681,28.4257804 20.3828093,28.1562518 21.015625,27.796875 Z"/>
+      </IconBase>
+    );
+  }
+  LineHeight.displayName = 'LineHeight';
+
+  module.exports = LineHeight;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svglib/line-through.js b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/line-through.js
new file mode 100644
index 000000000..f591a9a4f
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/line-through.js
@@ -0,0 +1,14 @@
+
+const React = require('react');
+  const IconBase = require('@ali/vu-icon-base');
+
+  function LineThrough(props) {
+    return (
+      <IconBase viewBox="0 0 21 26" {...props}>
+        <path d="M12.656,12 L12.656,2.212 L15.176,2.212 C15.8106698,2.212 16.361331,2.30999902 16.828,2.506 C17.294669,2.70200098 17.6913317,3.04733086 18.018,3.542 C18.3446683,4.03666914 18.133333,4.40132708 18.208,5.652 L20.972,5.568 L20.972,0 L0,0 L0,5.568 L2.764,5.652 C2.83866704,4.40132708 2.6273317,4.03666914 2.954,3.542 C3.2806683,3.04733086 3.677331,2.70200098 4.144,2.506 C4.610669,2.30999902 5.16133016,2.212 5.796,2.212 L8.344,2.212 L8.344,12 L0,12 L0,14 L8.344,14 L8.344,22.892 C8.344,23.750671 7.51334164,24.18 5.852,24.18 L5.852,25.804 L15.176,25.804 L15.176,24.18 C13.4959916,24.18 12.656,23.750671 12.656,22.892 L12.656,14 L21,14 L21,12 L12.656,12 Z"/>
+      </IconBase>
+    );
+  }
+  LineThrough.displayName = 'LineThrough';
+
+  module.exports = LineThrough;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svglib/lowercase.js b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/lowercase.js
new file mode 100644
index 000000000..28dda581a
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/lowercase.js
@@ -0,0 +1,14 @@
+
+const React = require('react');
+  const IconBase = require('@ali/vu-icon-base');
+
+  function Lowercase(props) {
+    return (
+      <IconBase viewBox="0 0 20 17" {...props}>
+        <path d="M5.64705882,3.95798319 L9,3.95798319 L8.87394958,5.77310924 C8.40335899,5.6722684 7.90336399,5.60084055 7.37394958,5.55882353 C6.84453517,5.51680651 6.26891067,5.49579832 5.64705882,5.49579832 L5.64705882,14.2941176 C5.64705882,15.0504239 6.01680303,15.4285714 6.75630252,15.4285714 C7.14285908,15.4285714 7.40756231,15.3235305 7.55042017,15.1134454 C7.69327803,14.9033603 7.76470588,14.6302538 7.76470588,14.2941176 L7.76470588,12.8319328 L9,12.8319328 L9,13.9411765 C9,14.3949603 8.95378197,14.8067208 8.86134454,15.1764706 C8.7689071,15.5462203 8.60084155,15.8613432 8.35714286,16.1218487 C8.11344416,16.3823542 7.78991798,16.5882345 7.38655462,16.7394958 C6.98319126,16.8907571 6.47059134,16.9663866 5.8487395,16.9663866 C4.53780857,16.9663866 3.60084315,16.6722718 3.03781513,16.0840336 C2.4747871,15.4957954 2.19327731,14.6722742 2.19327731,13.6134454 L2.19327731,5.49579832 L0,5.49579832 L0,4.28571429 C0.470590588,4.25210067 0.911762647,4.18487445 1.32352941,4.08403361 C1.73529618,3.98319277 2.0966371,3.80672395 2.40756303,3.55462185 C2.71848895,3.30251975 2.96218399,2.9495821 3.13865546,2.49579832 C3.31512693,2.04201454 3.40336134,1.45378513 3.40336134,0.731092437 L3.40336134,0.176470588 L5.64705882,0 L5.64705882,3.95798319 Z M16.6470588,3.95798319 L20,3.95798319 L19.8739496,5.77310924 C19.403359,5.6722684 18.903364,5.60084055 18.3739496,5.55882353 C17.8445352,5.51680651 17.2689107,5.49579832 16.6470588,5.49579832 L16.6470588,14.2941176 C16.6470588,15.0504239 17.016803,15.4285714 17.7563025,15.4285714 C18.1428591,15.4285714 18.4075623,15.3235305 18.5504202,15.1134454 C18.693278,14.9033603 18.7647059,14.6302538 18.7647059,14.2941176 L18.7647059,12.8319328 L20,12.8319328 L20,13.9411765 C20,14.3949603 19.953782,14.8067208 19.8613445,15.1764706 C19.7689071,15.5462203 19.6008416,15.8613432 19.3571429,16.1218487 C19.1134442,16.3823542 18.789918,16.5882345 18.3865546,16.7394958 C17.9831913,16.8907571 17.4705913,16.9663866 16.8487395,16.9663866 C15.5378086,16.9663866 14.6008432,16.6722718 14.0378151,16.0840336 C13.4747871,15.4957954 13.1932773,14.6722742 13.1932773,13.6134454 L13.1932773,5.49579832 L11,5.49579832 L11,4.28571429 C11.4705906,4.25210067 11.9117626,4.18487445 12.3235294,4.08403361 C12.7352962,3.98319277 13.0966371,3.80672395 13.407563,3.55462185 C13.7184889,3.30251975 13.962184,2.9495821 14.1386555,2.49579832 C14.3151269,2.04201454 14.4033613,1.45378513 14.4033613,0.731092437 L14.4033613,0.176470588 L16.6470588,0 L16.6470588,3.95798319 Z"/>
+      </IconBase>
+    );
+  }
+  Lowercase.displayName = 'Lowercase';
+
+  module.exports = Lowercase;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svglib/no.js b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/no.js
new file mode 100644
index 000000000..6a4e294c9
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/no.js
@@ -0,0 +1,14 @@
+
+const React = require('react');
+  const IconBase = require('@ali/vu-icon-base');
+
+  function No(props) {
+    return (
+      <IconBase viewBox="0 0 1024 1024" {...props}>
+        <path d="M571.733333 512l238.933333 238.933333L750.933333 810.666667 512 571.733333 273.066667 810.666667 213.333333 750.933333l238.933333-238.933333L213.333333 273.066667 273.066667 213.333333l238.933333 238.933333L750.933333 213.333333 810.666667 273.066667 571.733333 512z"/>
+      </IconBase>
+    );
+  }
+  No.displayName = 'No';
+
+  module.exports = No;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svglib/none.js b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/none.js
new file mode 100644
index 000000000..78e6d598b
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/none.js
@@ -0,0 +1,15 @@
+
+const React = require('react');
+  const IconBase = require('@ali/vu-icon-base');
+
+  function None(props) {
+    return (
+      <IconBase viewBox="0 0 1024 1024" {...props}>
+        <path d="M461.952 746.432l-258.56 0 0-99.776 258.56 0L461.952 746.432z"/>
+  <path d="M853.056 746.432l-258.56 0 0-99.776 258.56 0L853.056 746.432z"/>
+      </IconBase>
+    );
+  }
+  None.displayName = 'None';
+
+  module.exports = None;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svglib/normal.js b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/normal.js
new file mode 100644
index 000000000..77291a6fc
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/normal.js
@@ -0,0 +1,14 @@
+
+const React = require('react');
+  const IconBase = require('@ali/vu-icon-base');
+
+  function Normal(props) {
+    return (
+      <IconBase viewBox="0 0 9 18" {...props}>
+        <path d="M8.203125,0.5 L8.203125,1.19140625 C7.92968613,1.25390656 7.72656316,1.29687488 7.59375,1.3203125 C6.5546823,1.5000009 5.95312582,1.66992107 5.7890625,1.83007812 C5.62499918,1.99023518 5.54296875,2.34765348 5.54296875,2.90234375 L5.54296875,3.3125 L5.49609375,8.0234375 L5.53125,14.8671875 C5.53125,15.4140652 5.61132732,15.761718 5.77148438,15.9101562 C5.93164143,16.0585945 6.48046406,16.1874995 7.41796875,16.296875 C7.59765715,16.3203126 7.85937328,16.3671871 8.203125,16.4375 L8.203125,17.1289062 C6.94530621,17.0429683 5.73438082,17 4.5703125,17 C3.36718148,17 2.04688219,17.0429683 0.609375,17.1289062 L0.609375,16.4375 C0.835938633,16.3749997 1.00781191,16.3359376 1.125,16.3203125 C2.23438055,16.1406241 2.86913982,15.9746101 3.02929688,15.8222656 C3.18945393,15.6699211 3.26953125,15.2851593 3.26953125,14.6679688 L3.2578125,14.0820312 L3.28125,9.78125 C3.28125,5.35935289 3.27343758,2.91406484 3.2578125,2.4453125 C3.24218742,2.18749871 3.15820389,1.98828195 3.00585938,1.84765625 C2.85351486,1.70703055 2.26172391,1.53906348 1.23046875,1.34375 C1.08984305,1.31249984 0.882813867,1.2617191 0.609375,1.19140625 L0.609375,0.5 C2.30469598,0.58593793 3.62890148,0.62890625 4.58203125,0.62890625 C5.64453656,0.62890625 6.85155574,0.58593793 8.203125,0.5 L8.203125,0.5 Z"/>
+      </IconBase>
+    );
+  }
+  Normal.displayName = 'Normal';
+
+  module.exports = Normal;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svglib/offset.js b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/offset.js
new file mode 100644
index 000000000..45f600752
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/offset.js
@@ -0,0 +1,14 @@
+
+const React = require('react');
+  const IconBase = require('@ali/vu-icon-base');
+
+  function Offset(props) {
+    return (
+      <IconBase viewBox="0 0 1150 1024" {...props}>
+        <path d="M576.764851 1023.958097c-10.039798 0.437213-18.18347-2.558848-24.127269-8.472734l-179.149291-178.454351-8.491142-8.636113-45.9189-45.757821-16.660127-16.671633c-6.562801-6.562801-10.175564-15.122977-10.175563-24.092752 0-8.152877 3.069697-15.721269 8.670629-21.3199 9.377074-9.342557 23.763692-11.284705 36.226572-5.025652l63.7549 63.513282 8.491142 8.622306 136.553212 136.023954V149.572963h60.459693v774.127527l150.44739-149.881314 53.537916-53.356127c11.965837-9.38858 29.017155-8.32316 39.91297 2.556547a30.071069 30.071069 0 0 1 8.882333 21.395837 29.753514 29.753514 0 0 1-8.790288 21.21635l-34.783768 34.742347-31.095068 30.968507-184.837666 184.172641c-5.900078 5.88397-14.043751 8.877731-22.907675 8.442819zM0 0h1150.561255v69.033675H0z"/>
+      </IconBase>
+    );
+  }
+  Offset.displayName = 'Offset';
+
+  module.exports = Offset;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svglib/opacity.js b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/opacity.js
new file mode 100644
index 000000000..34c484c13
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/opacity.js
@@ -0,0 +1,15 @@
+
+const React = require('react');
+  const IconBase = require('@ali/vu-icon-base');
+
+  function Opacity(props) {
+    return (
+      <IconBase viewBox="0 0 1024 1024" {...props}>
+        <path d="M256 598.016l512 0q0-109.994667-75.989333-185.984l-180.010667-187.989333-180.010667 185.984q-75.989333 75.989333-75.989333 187.989333zM754.005333 342.016q100.010667 100.010667 100.010667 240 0 141.994667-100.010667 242.005333t-242.005333 100.010667-242.005333-100.010667-100.010667-242.005333q0-139.989333 100.010667-240l242.005333-242.005333z">
+  </path>
+      </IconBase>
+    );
+  }
+  Opacity.displayName = 'Opacity';
+
+  module.exports = Opacity;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svglib/repeat-a.js b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/repeat-a.js
new file mode 100644
index 000000000..883e0fd2b
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/repeat-a.js
@@ -0,0 +1,14 @@
+
+const React = require('react');
+  const IconBase = require('@ali/vu-icon-base');
+
+  function RepeatA(props) {
+    return (
+      <IconBase viewBox="0 0 1024 1024" {...props}>
+        <path d="M658.285714 658.285714 658.285714 877.714286 877.714286 877.714286 877.714286 658.285714 658.285714 658.285714ZM365.714286 658.285714 365.714286 877.714286 585.142857 877.714286 585.142857 658.285714 365.714286 658.285714ZM73.142857 658.285714 73.142857 877.714286 292.571429 877.714286 292.571429 658.285714 73.142857 658.285714ZM658.285714 365.714286 658.285714 585.142857 877.714286 585.142857 877.714286 365.714286 658.285714 365.714286ZM365.714286 365.714286 365.714286 585.142857 585.142857 585.142857 585.142857 365.714286 365.714286 365.714286ZM73.142857 365.714286 73.142857 585.142857 292.571429 585.142857 292.571429 365.714286 73.142857 365.714286ZM658.285714 73.142857 658.285714 292.571429 877.714286 292.571429 877.714286 73.142857 658.285714 73.142857ZM365.714286 73.142857 365.714286 292.571429 585.142857 292.571429 585.142857 73.142857 365.714286 73.142857ZM73.142857 73.142857 73.142857 292.571429 292.571429 292.571429 292.571429 73.142857 73.142857 73.142857Z"/>
+      </IconBase>
+    );
+  }
+  RepeatA.displayName = 'RepeatA';
+
+  module.exports = RepeatA;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svglib/repeat-x.js b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/repeat-x.js
new file mode 100644
index 000000000..b471ad8f3
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/repeat-x.js
@@ -0,0 +1,14 @@
+
+const React = require('react');
+  const IconBase = require('@ali/vu-icon-base');
+
+  function RepeatX(props) {
+    return (
+      <IconBase viewBox="0 0 1024 1024" {...props}>
+        <path d="M658.285714 658.285714 877.714286 658.285714 877.714286 438.857143 658.285714 438.857143 658.285714 658.285714ZM365.714286 658.285714 585.142857 658.285714 585.142857 438.857143 365.714286 438.857143 365.714286 658.285714ZM73.142857 658.285714 292.571429 658.285714 292.571429 438.857143 73.142857 438.857143 73.142857 658.285714Z"/>
+      </IconBase>
+    );
+  }
+  RepeatX.displayName = 'RepeatX';
+
+  module.exports = RepeatX;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svglib/repeat-y.js b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/repeat-y.js
new file mode 100644
index 000000000..b19684fb6
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/repeat-y.js
@@ -0,0 +1,14 @@
+
+const React = require('react');
+  const IconBase = require('@ali/vu-icon-base');
+
+  function RepeatY(props) {
+    return (
+      <IconBase viewBox="0 0 1024 1024" {...props}>
+        <path d="M365.714286 658.285714 365.714286 877.714286 585.142857 877.714286 585.142857 658.285714 365.714286 658.285714ZM365.714286 365.714286 365.714286 585.142857 585.142857 585.142857 585.142857 365.714286 365.714286 365.714286ZM365.714286 73.142857 365.714286 292.571429 585.142857 292.571429 585.142857 73.142857 365.714286 73.142857Z"/>
+      </IconBase>
+    );
+  }
+  RepeatY.displayName = 'RepeatY';
+
+  module.exports = RepeatY;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svglib/repeat.js b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/repeat.js
new file mode 100644
index 000000000..e18f4fa9e
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/repeat.js
@@ -0,0 +1,14 @@
+
+const React = require('react');
+  const IconBase = require('@ali/vu-icon-base');
+
+  function Repeat(props) {
+    return (
+      <IconBase viewBox="0 0 1024 1024" {...props}>
+        <path d="M0 658.285714h292.571429V365.714286H0v292.571428z m365.714286-365.714285h292.571428V0H365.714286v292.571429zM0 292.571429h292.571429V0H0v292.571429zM292.571429 879.013303L147.698834 1024 0 879.013303h115.644709V731.428571h61.282011v147.584732zM879.013303 292.571429L1024 147.698834 879.013303 0v115.644709H731.428571v61.282011h147.584732z"/>
+      </IconBase>
+    );
+  }
+  Repeat.displayName = 'Repeat';
+
+  module.exports = Repeat;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svglib/text-align-center.js b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/text-align-center.js
new file mode 100644
index 000000000..fad6706ac
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/text-align-center.js
@@ -0,0 +1,14 @@
+
+const React = require('react');
+  const IconBase = require('@ali/vu-icon-base');
+
+  function TextAlignCenter(props) {
+    return (
+      <IconBase viewBox="0 0 26 22" {...props}>
+        <path d="M0,0 L26,0 L26,2 L0,2 L0,0 Z M2,8 L24,8 L24,10 L2,10 L2,8 Z M4,16 L22,16 L22,18 L4,18 L4,16 Z M4,4 L22,4 L22,6 L4,6 L4,4 Z M0,12 L26,12 L26,14 L0,14 L0,12 Z M2,20 L24,20 L24,22 L2,22 L2,20 Z"/>
+      </IconBase>
+    );
+  }
+  TextAlignCenter.displayName = 'TextAlignCenter';
+
+  module.exports = TextAlignCenter;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svglib/text-align-justify.js b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/text-align-justify.js
new file mode 100644
index 000000000..bbc4cb4e4
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/text-align-justify.js
@@ -0,0 +1,14 @@
+
+const React = require('react');
+  const IconBase = require('@ali/vu-icon-base');
+
+  function TextAlignJustify(props) {
+    return (
+      <IconBase viewBox="0 0 22 22" {...props}>
+        <path d="M0,0 L22,0 L22,2 L0,2 L0,0 Z M0,8 L22,8 L22,10 L0,10 L0,8 Z M0,16 L22,16 L22,18 L0,18 L0,16 Z M0,4 L22,4 L22,6 L0,6 L0,4 Z M0,12 L22,12 L22,14 L0,14 L0,12 Z M0,20 L12,20 L12,22 L0,22 L0,20 Z"/>
+      </IconBase>
+    );
+  }
+  TextAlignJustify.displayName = 'TextAlignJustify';
+
+  module.exports = TextAlignJustify;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svglib/text-align-left.js b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/text-align-left.js
new file mode 100644
index 000000000..9ccbf09f9
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/text-align-left.js
@@ -0,0 +1,14 @@
+
+const React = require('react');
+  const IconBase = require('@ali/vu-icon-base');
+
+  function TextAlignLeft(props) {
+    return (
+      <IconBase viewBox="0 0 22 22" {...props}>
+        <path d="M0,0 L22,0 L22,2 L0,2 L0,0 Z M0,8 L22,8 L22,10 L0,10 L0,8 Z M0,16 L22,16 L22,18 L0,18 L0,16 Z M0,4 L18,4 L18,6 L0,6 L0,4 Z M0,12 L20,12 L20,14 L0,14 L0,12 Z M0,20 L14,20 L14,22 L0,22 L0,20 Z"/>
+      </IconBase>
+    );
+  }
+  TextAlignLeft.displayName = 'TextAlignLeft';
+
+  module.exports = TextAlignLeft;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svglib/text-align.js b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/text-align.js
new file mode 100644
index 000000000..e8d49121c
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/text-align.js
@@ -0,0 +1,14 @@
+
+const React = require('react');
+  const IconBase = require('@ali/vu-icon-base');
+
+  function TextAlign(props) {
+    return (
+      <IconBase viewBox="0 0 32 30" {...props}>
+        <path d="M0,0 L2,0 L2,30 L0,30 L0,0 Z M4,2 L30,2 L30,4 L4,4 L4,2 Z M4,10 L32,10 L32,12 L4,12 L4,10 Z M4,18 L24,18 L24,20 L4,20 L4,18 Z M10,26 L14,26 L14,28 L10,28 L10,26 Z M4,6 L28,6 L28,8 L4,8 L4,6 Z M4,14 L28,14 L28,16 L4,16 L4,14 Z M3.93811035,27 L10,24 L10,30 L3.93811035,27 Z"/>
+      </IconBase>
+    );
+  }
+  TextAlign.displayName = 'TextAlign';
+
+  module.exports = TextAlign;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svglib/text-decoration.js b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/text-decoration.js
new file mode 100644
index 000000000..0e1ce3923
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/text-decoration.js
@@ -0,0 +1,15 @@
+
+const React = require('react');
+  const IconBase = require('@ali/vu-icon-base');
+
+  function TextDecoration(props) {
+    return (
+      <IconBase viewBox="0 0 18 16" {...props}>
+        <path d="M11.176,10.176 L5.824,10.176 L4.288,14.04 C4.2079996,14.232001 4.168,14.3919994 4.168,14.52 C4.168,14.8560017 4.65599512,15.0959993 5.632,15.24 C5.74400056,15.2560001 5.8199998,15.2999996 5.86,15.372 C5.9000002,15.4440004 5.92,15.5279995 5.92,15.624 C5.92,15.7200005 5.90400016,15.8479992 5.872,16.008 C5.43999784,15.9759998 4.9840024,15.9480001 4.504,15.924 C4.0239976,15.8999999 3.55200232,15.888 3.088,15.888 C2.7679984,15.888 2.44000168,15.8959999 2.104,15.912 C1.76799832,15.9280001 1.41600184,15.9599998 1.048,16.008 C1.01599984,15.8799994 1,15.7520006 1,15.624 C1,15.5119994 1.0199998,15.4160004 1.06,15.336 C1.1000002,15.2559996 1.18399936,15.2080001 1.312,15.192 C1.80800248,15.1119996 2.17999876,15.0120006 2.428,14.892 C2.67600124,14.7719994 2.85599944,14.5840013 2.968,14.328 L8.752,0.408 C8.86400056,0.13599864 9.01599904,0 9.208,0 C9.27200032,0 9.36799936,0.01599984 9.496,0.048 L15.304,14.4 C15.4000005,14.6240011 15.6159983,14.7999994 15.952,14.928 C16.2880017,15.0560006 16.6159984,15.1439998 16.936,15.192 C17.0320005,15.2240002 17.1079997,15.2679997 17.164,15.324 C17.2200003,15.3800003 17.248,15.4799993 17.248,15.624 C17.248,15.7200005 17.2320002,15.8479992 17.2,16.008 C16.6879974,15.9759998 16.1840025,15.9480001 15.688,15.924 C15.1919975,15.8999999 14.7280022,15.888 14.296,15.888 C13.8479978,15.888 13.3360029,15.8999999 12.76,15.924 C12.1839971,15.9480001 11.6640023,15.9759998 11.2,16.008 C11.1679998,15.8479992 11.152,15.7200005 11.152,15.624 C11.152,15.4799993 11.1799997,15.3800003 11.236,15.324 C11.2920003,15.2679997 11.3439998,15.24 11.392,15.24 C11.8080021,15.1599996 12.1439987,15.0680005 12.4,14.964 C12.6560013,14.8599995 12.784,14.704001 12.784,14.496 C12.784,14.3999995 12.7520003,14.2800007 12.688,14.136 L11.176,10.176 Z M10.792,9.192 L8.56,3.312 L6.232,9.192 L10.792,9.192 Z"/>
+  <rect x="0" y="9" width="18" height="2"/>
+      </IconBase>
+    );
+  }
+  TextDecoration.displayName = 'TextDecoration';
+
+  module.exports = TextDecoration;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svglib/text-indent.js b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/text-indent.js
new file mode 100644
index 000000000..11d668733
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/text-indent.js
@@ -0,0 +1,14 @@
+
+const React = require('react');
+  const IconBase = require('@ali/vu-icon-base');
+
+  function TextIndent(props) {
+    return (
+      <IconBase viewBox="0 0 1450 1024" {...props}>
+        <path d="M253.354667 255.573333H0v-85.333333h253.354667V0L554.666667 191.786667 253.354667 383.573333v-128zM1450.666667 340.906667H682.666667v-170.666667h768v170.666667z m0 170.666666H426.666667v-85.333333h1024v85.333333z m0 170.666667H426.666667v-85.333333h1024v85.333333z m0 170.666667H426.666667v-85.333334h1024v85.333334z m-256 170.666666H426.666667v-85.333333h768v85.333333z"/>
+      </IconBase>
+    );
+  }
+  TextIndent.displayName = 'TextIndent';
+
+  module.exports = TextIndent;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svglib/text-transform.js b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/text-transform.js
new file mode 100644
index 000000000..29b2a03f8
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/text-transform.js
@@ -0,0 +1,14 @@
+
+const React = require('react');
+  const IconBase = require('@ali/vu-icon-base');
+
+  function TextTransform(props) {
+    return (
+      <IconBase viewBox="0 0 40 18" {...props}>
+        <path d="M37.9692353,15.72 C38.1257067,16.2000024 38.7672297,16.44 39.8938235,16.44 L39.8938235,17.832 L31.3035882,17.832 L31.3035882,16.44 L33.369,16.44 C33.822767,16.44 34.0496471,16.2880015 34.0496471,15.984 C34.0496471,15.9359998 34.0261767,15.8480006 33.9792353,15.72 L33.0404118,13.128 L25.8349412,13.128 L24.9665294,15.528 C24.9352351,15.6240005 24.9195882,15.7199995 24.9195882,15.816 C24.9195882,16.2320021 25.2638201,16.44 25.9522941,16.44 L27.4074706,16.44 L27.4074706,17.832 L21,17.832 L21,16.416 C21.6571798,16.416 22.1422337,16.3600006 22.4551765,16.248 C22.7681192,16.1359994 22.9637055,15.9680011 23.0419412,15.744 L28.9095882,0 L32.3128235,0 L37.9692353,15.72 Z M26.8676471,10.848 L32.8761176,10.848 L29.8953529,2.4 L26.8676471,10.848 Z M16.9692353,15.72 C17.1257067,16.2000024 17.7672297,16.44 18.8938235,16.44 L18.8938235,17.832 L10.3035882,17.832 L10.3035882,16.44 L12.369,16.44 C12.822767,16.44 13.0496471,16.2880015 13.0496471,15.984 C13.0496471,15.9359998 13.0261767,15.8480006 12.9792353,15.72 L12.0404118,13.128 L4.83494118,13.128 L3.96652941,15.528 C3.93523514,15.6240005 3.91958824,15.7199995 3.91958824,15.816 C3.91958824,16.2320021 4.26382009,16.44 4.95229412,16.44 L6.40747059,16.44 L6.40747059,17.832 L0,17.832 L0,16.416 C0.657179756,16.416 1.14223373,16.3600006 1.45517647,16.248 C1.76811921,16.1359994 1.96370549,15.9680011 2.04194118,15.744 L7.90958824,0 L11.3128235,0 L16.9692353,15.72 Z M5.86764706,10.848 L11.8761176,10.848 L8.89535294,2.4 L5.86764706,10.848 Z"/>
+      </IconBase>
+    );
+  }
+  TextTransform.displayName = 'TextTransform';
+
+  module.exports = TextTransform;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svglib/underline.js b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/underline.js
new file mode 100644
index 000000000..43e72a55d
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/underline.js
@@ -0,0 +1,14 @@
+
+const React = require('react');
+  const IconBase = require('@ali/vu-icon-base');
+
+  function Underline(props) {
+    return (
+      <IconBase viewBox="0 0 21 26" {...props}>
+        <path d="M20.972,5.568 L18.208,5.652 C18.133333,4.40132708 18.3446683,4.03666914 18.018,3.542 C17.6913317,3.04733086 17.294669,2.70200098 16.828,2.506 C16.361331,2.30999902 15.8106698,2.212 15.176,2.212 L12.656,2.212 L12.656,18.892 C12.656,19.750671 13.4959916,20.18 15.176,20.18 L15.176,21.804 L5.852,21.804 L5.852,20.18 C7.51334164,20.18 8.344,19.750671 8.344,18.892 L8.344,2.212 L5.796,2.212 C5.16133016,2.212 4.610669,2.30999902 4.144,2.506 C3.677331,2.70200098 3.2806683,3.04733086 2.954,3.542 C2.6273317,4.03666914 2.83866704,4.40132708 2.764,5.652 L0,5.568 L0,0 L20.972,0 L20.972,5.568 Z M0,24 L21,24 L21,26 L0,26 L0,24 Z"/>
+      </IconBase>
+    );
+  }
+  Underline.displayName = 'Underline';
+
+  module.exports = Underline;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svglib/uppercase.js b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/uppercase.js
new file mode 100644
index 000000000..9ad6fa370
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/uppercase.js
@@ -0,0 +1,14 @@
+
+const React = require('react');
+  const IconBase = require('@ali/vu-icon-base');
+
+  function Uppercase(props) {
+    return (
+      <IconBase viewBox="0 0 30 17" {...props}>
+        <path d="M14,4.34122179 L12.1548732,4.40671436 C12.1050287,3.43159789 12.246107,3.14728377 12.0280374,2.76160338 C11.8099678,2.37592298 11.5451729,2.10667844 11.2336449,1.95386168 C10.9221168,1.80104492 10.5545193,1.72463768 10.1308411,1.72463768 L8.44859813,1.72463768 L8.44859813,14.7295909 C8.44859813,15.3990739 9.00934019,15.7338103 10.1308411,15.7338103 L10.1308411,17 L3.90654206,17 L3.90654206,15.7338103 C5.01558187,15.7338103 5.57009346,15.3990739 5.57009346,14.7295909 L5.57009346,1.72463768 L3.86915888,1.72463768 C3.44548075,1.72463768 3.07788318,1.80104492 2.76635514,1.95386168 C2.4548271,2.10667844 2.19003224,2.37592298 1.97196262,2.76160338 C1.75389299,3.14728377 1.89497132,3.43159789 1.84512684,4.40671436 L0,4.34122179 L0,0 L14,0 L14,4.34122179 Z M30,4.34122179 L28.1548732,4.40671436 C28.1050287,3.43159789 28.246107,3.14728377 28.0280374,2.76160338 C27.8099678,2.37592298 27.5451729,2.10667844 27.2336449,1.95386168 C26.9221168,1.80104492 26.5545193,1.72463768 26.1308411,1.72463768 L24.4485981,1.72463768 L24.4485981,14.7295909 C24.4485981,15.3990739 25.0093402,15.7338103 26.1308411,15.7338103 L26.1308411,17 L19.9065421,17 L19.9065421,15.7338103 C21.0155819,15.7338103 21.5700935,15.3990739 21.5700935,14.7295909 L21.5700935,1.72463768 L19.8691589,1.72463768 C19.4454807,1.72463768 19.0778832,1.80104492 18.7663551,1.95386168 C18.4548271,2.10667844 18.1900322,2.37592298 17.9719626,2.76160338 C17.753893,3.14728377 17.8949713,3.43159789 17.8451268,4.40671436 L16,4.34122179 L16,0 L30,0 L30,4.34122179 Z"/>
+      </IconBase>
+    );
+  }
+  Uppercase.displayName = 'Uppercase';
+
+  module.exports = Uppercase;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svglib/wrap-around-v.js b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/wrap-around-v.js
new file mode 100644
index 000000000..d4f07526b
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/wrap-around-v.js
@@ -0,0 +1,14 @@
+
+const React = require('react');
+  const IconBase = require('@ali/vu-icon-base');
+
+  function WrapAroundV(props) {
+    return (
+      <IconBase viewBox="0 0 16 17" {...props}>
+        <g fillRule="evenodd"><path d="M11 3h5v5h-5zm0 6h5v5h-5z"/><path opacity=".4" d="M1 4h3v3H1z"/><path d="M1 4v3h3V4H1zM0 3h5v5H0V3z"/><path opacity=".4" d="M1 10h3v3H1z"/><path d="M1 10v3h3v-3H1zM0 9h5v5H0V9z"/><path d="M2 0h1v17H2V0zm0 8.5h1v6H2v-6zm0-6h1v6H2v-6zM13 0h1v17h-1V0zm0 8.5h1v6h-1v-6zm0-6h1v6h-1v-6z" opacity=".5"/></g>
+      </IconBase>
+    );
+  }
+  WrapAroundV.displayName = 'WrapAroundV';
+
+  module.exports = WrapAroundV;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svglib/wrap-around.js b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/wrap-around.js
new file mode 100644
index 000000000..32db8f1e4
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/wrap-around.js
@@ -0,0 +1,14 @@
+
+const React = require('react');
+  const IconBase = require('@ali/vu-icon-base');
+
+  function WrapAround(props) {
+    return (
+      <IconBase viewBox="0 0 21 13" {...props}>
+        <g fillRule="evenodd"><path d="M0 2h21v1H0V2zm4.5 0h12v1h-12V2zM0 10h21v1H0v-1zm4.5 0h12v1h-12v-1z" opacity=".5"/><path d="M11 8h5v5h-5zM5 8h5v5H5z"/><path opacity=".4" d="M12 1h3v3h-3z"/><path d="M12 1v3h3V1h-3zm-1-1h5v5h-5V0z"/><path opacity=".4" d="M6 1h3v3H6z"/><path d="M6 1v3h3V1H6zM5 0h5v5H5V0z"/></g>
+      </IconBase>
+    );
+  }
+  WrapAround.displayName = 'WrapAround';
+
+  module.exports = WrapAround;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svglib/wrap-between-v.js b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/wrap-between-v.js
new file mode 100644
index 000000000..205212e29
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/wrap-between-v.js
@@ -0,0 +1,14 @@
+
+const React = require('react');
+  const IconBase = require('@ali/vu-icon-base');
+
+  function WrapBetweenV(props) {
+    return (
+      <IconBase viewBox="0 0 24 17" {...props}>
+        <g fillRule="evenodd"><path opacity=".5" d="M0 0h1v17H0zm23 0h1v17h-1z"/><path d="M17 3h5v5h-5zm0 6h5v5h-5z"/><path opacity=".4" d="M3 4h3v3H3z"/><path d="M3 4v3h3V4H3zM2 3h5v5H2V3z"/><path opacity=".4" d="M3 10h3v3H3z"/><path d="M3 10v3h3v-3H3zM2 9h5v5H2V9z"/></g>
+      </IconBase>
+    );
+  }
+  WrapBetweenV.displayName = 'WrapBetweenV';
+
+  module.exports = WrapBetweenV;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svglib/wrap-between.js b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/wrap-between.js
new file mode 100644
index 000000000..a0e02d626
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/wrap-between.js
@@ -0,0 +1,14 @@
+
+const React = require('react');
+  const IconBase = require('@ali/vu-icon-base');
+
+  function WrapBetween(props) {
+    return (
+      <IconBase viewBox="0 0 21 18" {...props}>
+        <g fillRule="evenodd"><path d="M11 11h5v5h-5zm-6 0h5v5H5z"/><path opacity=".4" d="M12 3h3v3h-3z"/><path d="M12 3v3h3V3h-3zm-1-1h5v5h-5V2z"/><path opacity=".4" d="M6 3h3v3H6z"/><path d="M6 3v3h3V3H6zM5 2h5v5H5V2z"/><path opacity=".5" d="M0 17h21v1H0zM0 0h21v1H0z"/></g>
+      </IconBase>
+    );
+  }
+  WrapBetween.displayName = 'WrapBetween';
+
+  module.exports = WrapBetween;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svglib/wrap-center-v.js b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/wrap-center-v.js
new file mode 100644
index 000000000..97c4f0742
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/wrap-center-v.js
@@ -0,0 +1,14 @@
+
+const React = require('react');
+  const IconBase = require('@ali/vu-icon-base');
+
+  function WrapCenterV(props) {
+    return (
+      <IconBase viewBox="0 0 13 17" {...props}>
+        <g fillRule="evenodd"><path opacity=".5" d="M6 0h1v17H6z"/><path d="M8 3h5v5H8zm0 6h5v5H8z"/><path opacity=".4" d="M1 4h3v3H1z"/><path d="M1 4v3h3V4H1zM0 3h5v5H0V3z"/><path opacity=".4" d="M1 10h3v3H1z"/><path d="M1 10v3h3v-3H1zM0 9h5v5H0V9z"/></g>
+      </IconBase>
+    );
+  }
+  WrapCenterV.displayName = 'WrapCenterV';
+
+  module.exports = WrapCenterV;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svglib/wrap-center.js b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/wrap-center.js
new file mode 100644
index 000000000..23b7e4fa3
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/wrap-center.js
@@ -0,0 +1,14 @@
+
+const React = require('react');
+  const IconBase = require('@ali/vu-icon-base');
+
+  function WrapCenter(props) {
+    return (
+      <IconBase viewBox="0 0 21 13" {...props}>
+        <g fillRule="evenodd"><path opacity=".5" d="M0 6h21v1H0z"/><path d="M11 8h5v5h-5zM5 8h5v5H5z"/><path opacity=".4" d="M12 1h3v3h-3z"/><path d="M12 1v3h3V1h-3zm-1-1h5v5h-5V0z"/><path opacity=".4" d="M6 1h3v3H6z"/><path d="M6 1v3h3V1H6zM5 0h5v5H5V0z"/></g>
+      </IconBase>
+    );
+  }
+  WrapCenter.displayName = 'WrapCenter';
+
+  module.exports = WrapCenter;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svglib/wrap-end-v.js b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/wrap-end-v.js
new file mode 100644
index 000000000..9db8a718d
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/wrap-end-v.js
@@ -0,0 +1,14 @@
+
+const React = require('react');
+  const IconBase = require('@ali/vu-icon-base');
+
+  function WrapEndV(props) {
+    return (
+      <IconBase viewBox="0 0 24 17" {...props}>
+        <g fillRule="evenodd"><path d="M17 3h5v5h-5zm0 6h5v5h-5z"/><path opacity=".4" d="M12 4h3v3h-3z"/><path d="M12 4v3h3V4h-3zm-1-1h5v5h-5V3z"/><path opacity=".4" d="M12 10h3v3h-3z"/><path d="M12 10v3h3v-3h-3zm-1-1h5v5h-5V9z"/><path opacity=".5" d="M23 0h1v17h-1z"/></g>
+      </IconBase>
+    );
+  }
+  WrapEndV.displayName = 'WrapEndV';
+
+  module.exports = WrapEndV;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svglib/wrap-end.js b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/wrap-end.js
new file mode 100644
index 000000000..81443ecfe
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/wrap-end.js
@@ -0,0 +1,14 @@
+
+const React = require('react');
+  const IconBase = require('@ali/vu-icon-base');
+
+  function WrapEnd(props) {
+    return (
+      <IconBase viewBox="0 0 21 18" {...props}>
+        <g fillRule="evenodd"><path d="M11 11h5v5h-5zm-6 0h5v5H5z"/><path opacity=".4" d="M12 6h3v3h-3z"/><path d="M12 6v3h3V6h-3zm-1-1h5v5h-5V5z"/><path opacity=".4" d="M6 6h3v3H6z"/><path d="M6 6v3h3V6H6zM5 5h5v5H5V5z"/><path opacity=".5" d="M0 17h21v1H0z"/></g>
+      </IconBase>
+    );
+  }
+  WrapEnd.displayName = 'WrapEnd';
+
+  module.exports = WrapEnd;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svglib/wrap-start-v.js b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/wrap-start-v.js
new file mode 100644
index 000000000..6df4dba44
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/wrap-start-v.js
@@ -0,0 +1,14 @@
+
+const React = require('react');
+  const IconBase = require('@ali/vu-icon-base');
+
+  function WrapStartV(props) {
+    return (
+      <IconBase viewBox="0 0 24 17" {...props}>
+        <g fillRule="evenodd"><path opacity=".5" d="M0 0h1v17H0z"/><path d="M8 3h5v5H8zm0 6h5v5H8z"/><path opacity=".4" d="M3 4h3v3H3z"/><path d="M3 4v3h3V4H3zM2 3h5v5H2V3z"/><path opacity=".4" d="M3 10h3v3H3z"/><path d="M3 10v3h3v-3H3zM2 9h5v5H2V9z"/></g>
+      </IconBase>
+    );
+  }
+  WrapStartV.displayName = 'WrapStartV';
+
+  module.exports = WrapStartV;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svglib/wrap-start.js b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/wrap-start.js
new file mode 100644
index 000000000..71b6a91d2
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/wrap-start.js
@@ -0,0 +1,14 @@
+
+const React = require('react');
+  const IconBase = require('@ali/vu-icon-base');
+
+  function WrapStart(props) {
+    return (
+      <IconBase viewBox="0 0 21 18" {...props}>
+        <g fillRule="evenodd"><path opacity=".5" d="M0 0h21v1H0z"/><path d="M11 8h5v5h-5zM5 8h5v5H5z"/><path opacity=".4" d="M12 3h3v3h-3z"/><path d="M12 3v3h3V3h-3zm-1-1h5v5h-5V2z"/><path opacity=".4" d="M6 3h3v3H6z"/><path d="M6 3v3h3V3H6zM5 2h5v5H5V2z"/></g>
+      </IconBase>
+    );
+  }
+  WrapStart.displayName = 'WrapStart';
+
+  module.exports = WrapStart;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svglib/wrap-stretch-v.js b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/wrap-stretch-v.js
new file mode 100644
index 000000000..64d11fe1d
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/wrap-stretch-v.js
@@ -0,0 +1,14 @@
+
+const React = require('react');
+  const IconBase = require('@ali/vu-icon-base');
+
+  function WrapStretchV(props) {
+    return (
+      <IconBase viewBox="0 0 25 17" {...props}>
+        <g fillRule="evenodd"><path opacity=".5" d="M0 0h1v17H0zm12 0h1v17h-1zm12 0h1v17h-1z"/><path d="M14 3h9v5h-9zm0 6h9v5h-9z"/><path opacity=".4" d="M3 4h7v3H3z"/><path d="M3 4v3h7V4H3zM2 3h9v5H2V3z"/><path opacity=".4" d="M3 10h7v3H3z"/><path d="M3 10v3h7v-3H3zM2 9h9v5H2V9z"/></g>
+      </IconBase>
+    );
+  }
+  WrapStretchV.displayName = 'WrapStretchV';
+
+  module.exports = WrapStretchV;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svglib/wrap-stretch.js b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/wrap-stretch.js
new file mode 100644
index 000000000..b1f2c3427
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/wrap-stretch.js
@@ -0,0 +1,14 @@
+
+const React = require('react');
+  const IconBase = require('@ali/vu-icon-base');
+
+  function WrapStretch(props) {
+    return (
+      <IconBase viewBox="0 0 21 19" {...props}>
+        <g fillRule="evenodd"><path d="M11 11h5v6h-5zm-6 0h5v6H5z"/><path opacity=".4" d="M12 3h3v4h-3zM6 3h3v4H6z"/><path d="M6 3v4h3V3H6zM5 2h5v6H5V2zm7 1v4h3V3h-3zm-1-1h5v6h-5V2z"/><path opacity=".5" d="M0 18h21v1H0zM0 0h21v1H0zm0 9h21v1H0z"/></g>
+      </IconBase>
+    );
+  }
+  WrapStretch.displayName = 'WrapStretch';
+
+  module.exports = WrapStretch;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svglib/yes.js b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/yes.js
new file mode 100644
index 000000000..4c4356ab3
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svglib/yes.js
@@ -0,0 +1,14 @@
+
+const React = require('react');
+  const IconBase = require('@ali/vu-icon-base');
+
+  function Yes(props) {
+    return (
+      <IconBase viewBox="0 0 1024 1024" {...props}>
+        <path d="M426.014138 788.782837 511.416204 703.381795 895.71987 319.076082 810.320874 233.676064 426.014138 617.980753 212.512556 404.477125 127.111514 489.878167 340.613096 703.381795Z"/>
+      </IconBase>
+    );
+  }
+  Yes.displayName = 'Yes';
+
+  module.exports = Yes;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svgs/align-baseline-v.svg b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/align-baseline-v.svg
new file mode 100644
index 000000000..5be079005
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/align-baseline-v.svg
@@ -0,0 +1 @@
+<svg width="24" height="17" viewBox="0 0 24 17"><g fill="currentColor" fill-rule="evenodd"><path opacity=".5" d="M0 0h1v17H0z"></path><path d="M2 9h9v5H2V9zm1 1h2v3H3v-3z"></path><path opacity=".4" d="M5 4h5v3H5z"></path><path d="M3 4v3h7V4H3zM2 3h9v5H2V3z"></path></g></svg>
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svgs/align-baseline.svg b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/align-baseline.svg
new file mode 100644
index 000000000..27f8167f2
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/align-baseline.svg
@@ -0,0 +1 @@
+<svg width="21" height="11" viewBox="0 0 21 11"><g fill="currentColor" fill-rule="evenodd"><path d="M0 5h21v1H0V5zm4.5 0h6v1h-6V5zm6 0h6v1h-6V5z" opacity=".5"></path><path d="M11 1h5v9h-5V1zm1 1h3v3h-3V2z"></path><path opacity=".4" d="M6 5h3v5H6z"></path><path d="M6 3v7h3V3H6zM5 2h5v9H5V2z"></path></g></svg>
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svgs/align-center-v.svg b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/align-center-v.svg
new file mode 100644
index 000000000..d57b81172
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/align-center-v.svg
@@ -0,0 +1 @@
+<svg width="9" height="17" viewBox="0 0 9 17"><g fill="currentColor" fill-rule="evenodd"><path d="M4 0h1v17H4V0zm0 8.5h1v6H4v-6zm0-6h1v6H4v-6z" opacity=".5"></path><path d="M0 9h9v5H0z"></path><path opacity=".4" d="M1 4h7v3H1z"></path><path d="M1 4v3h7V4H1zM0 3h9v5H0V3z"></path></g></svg>
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svgs/align-center.svg b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/align-center.svg
new file mode 100644
index 000000000..697aaba52
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/align-center.svg
@@ -0,0 +1 @@
+<svg width="21" height="9" viewBox="0 0 21 9"><g fill="currentColor" fill-rule="evenodd"><path d="M0 4h21v1H0V4zm4.5 0h6v1h-6V4zm6 0h6v1h-6V4z" opacity=".5"></path><path d="M11 0h5v9h-5z"></path><path opacity=".4" d="M6 1h3v7H6z"></path><path d="M6 1v7h3V1H6zM5 0h5v9H5V0z"></path></g></svg>
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svgs/align-end-v.svg b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/align-end-v.svg
new file mode 100644
index 000000000..23ad0832d
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/align-end-v.svg
@@ -0,0 +1 @@
+<svg width="24" height="17" viewBox="0 0 24 17"><g fill="currentColor" fill-rule="evenodd"><path opacity=".5" d="M23 0h1v17h-1z"></path><path d="M13 9h9v5h-9z"></path><path opacity=".4" d="M14 4h7v3h-7z"></path><path d="M14 4v3h7V4h-7zm-1-1h9v5h-9V3z"></path></g></svg>
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svgs/align-end.svg b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/align-end.svg
new file mode 100644
index 000000000..5df227539
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/align-end.svg
@@ -0,0 +1 @@
+<svg width="21" height="18" viewBox="0 0 21 18"><g fill="currentColor" fill-rule="evenodd"><path opacity=".5" d="M0 17h21v1H0z"></path><path d="M11 7h5v9h-5z"></path><path opacity=".4" d="M6 8h3v7H6z"></path><path d="M6 8v7h3V8H6zM5 7h5v9H5V7z"></path></g></svg>
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svgs/align-start-v.svg b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/align-start-v.svg
new file mode 100644
index 000000000..361517c43
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/align-start-v.svg
@@ -0,0 +1 @@
+<svg width="24" height="17" viewBox="0 0 24 17"><g fill="currentColor" fill-rule="evenodd"><path opacity=".5" d="M0 0h1v17H0z"></path><path d="M2 9h9v5H2z"></path><path opacity=".4" d="M3 4h7v3H3z"></path><path d="M3 4v3h7V4H3zM2 3h9v5H2V3z"></path></g></svg>
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svgs/align-start.svg b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/align-start.svg
new file mode 100644
index 000000000..dce9bd3e4
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/align-start.svg
@@ -0,0 +1 @@
+<svg width="21" height="18" viewBox="0 0 21 18"><g fill="currentColor" fill-rule="evenodd"><path opacity=".5" d="M0 0h21v1H0z"></path><path d="M11 2h5v9h-5z"></path><path opacity=".4" d="M6 3h3v7H6z"></path><path d="M6 3v7h3V3H6zM5 2h5v9H5V2z"></path></g></svg>
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svgs/align-stretch-v.svg b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/align-stretch-v.svg
new file mode 100644
index 000000000..f2f1b11da
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/align-stretch-v.svg
@@ -0,0 +1 @@
+<svg width="24" height="17" viewBox="0 0 24 17"><g fill="currentColor" fill-rule="evenodd"><path opacity=".5" d="M23 0h1v17h-1zM0 0h1v17H0z"></path><path d="M2 9h20v5H2z"></path><path opacity=".4" d="M3 4h18v3H3z"></path><path d="M3 4v3h18V4H3zM2 3h20v5H2V3z"></path></g></svg>
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svgs/align-stretch.svg b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/align-stretch.svg
new file mode 100644
index 000000000..163ef1f70
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/align-stretch.svg
@@ -0,0 +1 @@
+<svg width="21" height="18" viewBox="0 0 21 18"><g fill="currentColor" fill-rule="evenodd"><path opacity=".5" d="M0 17h21v1H0zM0 0h21v1H0z"></path><path d="M11 2h5v14h-5z"></path><path opacity=".4" d="M6 3h3v12H6z"></path><path d="M6 3v12h3V3H6zM5 2h5v14H5V2z"></path></g></svg>
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svgs/auto.svg b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/auto.svg
new file mode 100644
index 000000000..ebe4e9ebd
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/auto.svg
@@ -0,0 +1,6 @@
+<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="1024" height="1024">
+  <path d="M486.4 102.4l51.2 0 0 409.6-51.2 0 0-409.6Z"></path>
+  <path d="M486.4 819.2l51.2 0 0 102.4-51.2 0 0-102.4Z"></path>
+  <path d="M307.2 204.8l409.6 0 0 256-409.6 0 0-256Z"></path>
+  <path d="M768 563.2l0 204.8L256 768l0-204.8L768 563.2M819.2 512 204.8 512l0 307.2 614.4 0L819.2 512 819.2 512z"></path>
+</svg>
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svgs/block.svg b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/block.svg
new file mode 100644
index 000000000..d59f553ee
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/block.svg
@@ -0,0 +1,5 @@
+<svg width="22" height="14" viewBox="0 0 22 14">
+  <path opacity=".15" fill="currentColor" d="M19 3v8H3V3h16m1-1H2v10h18V2z"></path>
+  <path fill="currentColor" d="M19.8 1H2.2A1.2 1.2 0 0 0 1 2.2v9.6A1.2 1.2 0 0 0 2.2 13h17.6a1.2 1.2 0 0 0 1.2-1.2V2.2A1.2 1.2 0 0 0 19.8 1zm.2 11H2V2h18v10z"></path>
+  <path opacity=".35" fill="currentColor" d="M3 3h16v8H3z"></path>
+</svg>
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svgs/blur.svg b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/blur.svg
new file mode 100644
index 000000000..c09996601
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/blur.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><path d="M598.016 361.984q25.984 0 45.013333 18.986667t18.986667 45.013333-18.986667 45.013333-45.013333 18.986667-45.013333-18.986667-18.986667-45.013333 18.986667-45.013333 45.013333-18.986667zM598.016 534.016q25.984 0 45.013333 18.986667t18.986667 45.013333-18.986667 45.013333-45.013333 18.986667-45.013333-18.986667-18.986667-45.013333 18.986667-45.013333 45.013333-18.986667zM425.984 726.016q18.005333 0 31.018667 11.989333t13.013333 29.994667-13.013333 29.994667-31.018667 11.989333-29.994667-11.989333-11.989333-29.994667 11.989333-29.994667 29.994667-11.989333zM425.984 361.984q25.984 0 45.013333 18.986667t18.986667 45.013333-18.986667 45.013333-45.013333 18.986667-45.013333-18.986667-18.986667-45.013333 18.986667-45.013333 45.013333-18.986667zM598.016 873.984q20.010667 0 20.010667 22.016t-20.010667 22.016q-22.016 0-22.016-22.016t22.016-22.016zM598.016 726.016q18.005333 0 29.994667 11.989333t11.989333 29.994667-11.989333 29.994667-29.994667 11.989333-31.018667-11.989333-13.013333-29.994667 13.013333-29.994667 31.018667-11.989333zM896 576q22.016 0 22.016 22.016 0 20.010667-22.016 20.010667t-22.016-20.010667q0-22.016 22.016-22.016zM768 214.016q18.005333 0 29.994667 11.989333t11.989333 29.994667-11.989333 29.994667-29.994667 11.989333-29.994667-11.989333-11.989333-29.994667 11.989333-29.994667 29.994667-11.989333zM768 384q18.005333 0 29.994667 11.989333t11.989333 29.994667-11.989333 31.018667-29.994667 13.013333-29.994667-13.013333-11.989333-31.018667 11.989333-29.994667 29.994667-11.989333zM768 726.016q18.005333 0 29.994667 11.989333t11.989333 29.994667-11.989333 29.994667-29.994667 11.989333-29.994667-11.989333-11.989333-29.994667 11.989333-29.994667 29.994667-11.989333zM768 553.984q18.005333 0 29.994667 13.013333t11.989333 31.018667-11.989333 29.994667-29.994667 11.989333-29.994667-11.989333-11.989333-29.994667 11.989333-31.018667 29.994667-13.013333zM425.984 534.016q25.984 0 45.013333 18.986667t18.986667 45.013333-18.986667 45.013333-45.013333 18.986667-45.013333-18.986667-18.986667-45.013333 18.986667-45.013333 45.013333-18.986667zM425.984 297.984q-18.005333 0-29.994667-11.989333t-11.989333-29.994667 11.989333-29.994667 29.994667-11.989333 31.018667 11.989333 13.013333 29.994667-13.013333 29.994667-31.018667 11.989333zM425.984 150.016q-20.010667 0-20.010667-22.016t20.010667-22.016q22.016 0 22.016 22.016t-22.016 22.016zM425.984 873.984q22.016 0 22.016 22.016t-22.016 22.016q-20.010667 0-20.010667-22.016t20.010667-22.016zM128 576q22.016 0 22.016 22.016 0 20.010667-22.016 20.010667t-22.016-20.010667q0-22.016 22.016-22.016zM598.016 150.016q-22.016 0-22.016-22.016t22.016-22.016q20.010667 0 20.010667 22.016t-20.010667 22.016zM598.016 297.984q-18.005333 0-31.018667-11.989333t-13.013333-29.994667 13.013333-29.994667 31.018667-11.989333 29.994667 11.989333 11.989333 29.994667-11.989333 29.994667-29.994667 11.989333zM896 448q-22.016 0-22.016-22.016 0-20.010667 22.016-20.010667t22.016 20.010667q0 22.016-22.016 22.016zM256 214.016q18.005333 0 29.994667 11.989333t11.989333 29.994667-11.989333 29.994667-29.994667 11.989333-29.994667-11.989333-11.989333-29.994667 11.989333-29.994667 29.994667-11.989333zM128 406.016q22.016 0 22.016 20.010667 0 22.016-22.016 22.016t-22.016-22.016q0-20.010667 22.016-20.010667zM256 384q18.005333 0 29.994667 11.989333t11.989333 29.994667-11.989333 31.018667-29.994667 13.013333-29.994667-13.013333-11.989333-31.018667 11.989333-29.994667 29.994667-11.989333zM256 726.016q18.005333 0 29.994667 11.989333t11.989333 29.994667-11.989333 29.994667-29.994667 11.989333-29.994667-11.989333-11.989333-29.994667 11.989333-29.994667 29.994667-11.989333zM256 553.984q18.005333 0 29.994667 13.013333t11.989333 31.018667-11.989333 29.994667-29.994667 11.989333-29.994667-11.989333-11.989333-29.994667 11.989333-31.018667 29.994667-13.013333z"  fill="#ffffff"></path></svg>
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svgs/border-all.svg b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/border-all.svg
new file mode 100644
index 000000000..302a05d91
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/border-all.svg
@@ -0,0 +1,12 @@
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g transform="translate(-40.000000, -40.000000)">
+            <g transform="translate(40.000000, 40.000000)">
+                <g transform="translate(10.000000, 10.000000) rotate(270.000000) translate(-10.000000, -10.000000) ">
+                    <rect fill="#999999" x="4" y="4" width="12" height="12"></rect>
+                    <path d="M0,-1.77635684e-15 L20,-1.77635684e-15 L20,20 L0,20 L0,-1.77635684e-15 Z M4,4 L16,4 L16,16 L4,16 L4,4 Z" fill="#DCDCDC"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svgs/border-bottom.svg b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/border-bottom.svg
new file mode 100644
index 000000000..7e5a51a25
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/border-bottom.svg
@@ -0,0 +1,13 @@
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g transform="translate(-40.000000, -40.000000)">
+            <rect fill="#676767" x="30" y="30" width="40" height="40"></rect>
+            <g transform="translate(40.000000, 40.000000)">
+                <g transform="translate(10.000000, 10.000000) rotate(180.000000) translate(-10.000000, -10.000000) ">
+                    <rect fill="#DCDCDC" x="0" y="0" width="20" height="4"></rect>
+                    <rect fill="#999999" x="0" y="4" width="20" height="16"></rect>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svgs/border-left.svg b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/border-left.svg
new file mode 100644
index 000000000..dbfd5a7a7
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/border-left.svg
@@ -0,0 +1,13 @@
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g transform="translate(-40.000000, -40.000000)">
+            <rect fill="#676767" x="30" y="30" width="40" height="40"></rect>
+            <g transform="translate(40.000000, 40.000000)">
+                <g transform="translate(10.000000, 10.000000) rotate(270.000000) translate(-10.000000, -10.000000) ">
+                    <rect fill="#DCDCDC" x="0" y="-1.77635684e-15" width="20" height="4"></rect>
+                    <rect fill="#999999" x="0" y="4" width="20" height="16"></rect>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svgs/border-right.svg b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/border-right.svg
new file mode 100644
index 000000000..02660f3d8
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/border-right.svg
@@ -0,0 +1,13 @@
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g transform="translate(-40.000000, -40.000000)">
+            <rect fill="#676767" x="30" y="30" width="40" height="40"></rect>
+            <g transform="translate(40.000000, 40.000000)">
+                <g transform="translate(10.000000, 10.000000) rotate(90.000000) translate(-10.000000, -10.000000) ">
+                    <rect fill="#DCDCDC" x="0" y="0" width="20" height="4"></rect>
+                    <rect fill="#999999" x="0" y="4" width="20" height="16"></rect>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svgs/border-top.svg b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/border-top.svg
new file mode 100644
index 000000000..670e15e04
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/border-top.svg
@@ -0,0 +1,12 @@
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g transform="translate(-40.000000, -40.000000)">
+            <g transform="translate(40.000000, 40.000000)">
+                <g>
+                    <rect fill="#DCDCDC" x="0" y="0" width="20" height="4"></rect>
+                    <rect fill="#999999" x="0" y="4" width="20" height="16"></rect>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svgs/capitalize.svg b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/capitalize.svg
new file mode 100644
index 000000000..954b503b7
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/capitalize.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="17" viewBox="0 0 24 17" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <path d="M14,4.34122179 L12.1548732,4.40671436 C12.1050287,3.43159789 12.246107,3.14728377 12.0280374,2.76160338 C11.8099678,2.37592298 11.5451729,2.10667844 11.2336449,1.95386168 C10.9221168,1.80104492 10.5545193,1.72463768 10.1308411,1.72463768 L8.44859813,1.72463768 L8.44859813,14.7295909 C8.44859813,15.3990739 9.00934019,15.7338103 10.1308411,15.7338103 L10.1308411,17 L3.90654206,17 L3.90654206,15.7338103 C5.01558187,15.7338103 5.57009346,15.3990739 5.57009346,14.7295909 L5.57009346,1.72463768 L3.86915888,1.72463768 C3.44548075,1.72463768 3.07788318,1.80104492 2.76635514,1.95386168 C2.4548271,2.10667844 2.19003224,2.37592298 1.97196262,2.76160338 C1.75389299,3.14728377 1.89497132,3.43159789 1.84512684,4.40671436 L0,4.34122179 L0,0 L14,0 L14,4.34122179 Z M20.6470588,3.95798319 L24,3.95798319 L23.8739496,5.77310924 C23.403359,5.6722684 22.903364,5.60084055 22.3739496,5.55882353 C21.8445352,5.51680651 21.2689107,5.49579832 20.6470588,5.49579832 L20.6470588,14.2941176 C20.6470588,15.0504239 21.016803,15.4285714 21.7563025,15.4285714 C22.1428591,15.4285714 22.4075623,15.3235305 22.5504202,15.1134454 C22.693278,14.9033603 22.7647059,14.6302538 22.7647059,14.2941176 L22.7647059,12.8319328 L24,12.8319328 L24,13.9411765 C24,14.3949603 23.953782,14.8067208 23.8613445,15.1764706 C23.7689071,15.5462203 23.6008416,15.8613432 23.3571429,16.1218487 C23.1134442,16.3823542 22.789918,16.5882345 22.3865546,16.7394958 C21.9831913,16.8907571 21.4705913,16.9663866 20.8487395,16.9663866 C19.5378086,16.9663866 18.6008432,16.6722718 18.0378151,16.0840336 C17.4747871,15.4957954 17.1932773,14.6722742 17.1932773,13.6134454 L17.1932773,5.49579832 L15,5.49579832 L15,4.28571429 C15.4705906,4.25210067 15.9117626,4.18487445 16.3235294,4.08403361 C16.7352962,3.98319277 17.0966371,3.80672395 17.407563,3.55462185 C17.7184889,3.30251975 17.962184,2.9495821 18.1386555,2.49579832 C18.3151269,2.04201454 18.4033613,1.45378513 18.4033613,0.731092437 L18.4033613,0.176470588 L20.6470588,0 L20.6470588,3.95798319 Z"></path>
+</svg>
\ No newline at end of file
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svgs/center.svg b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/center.svg
new file mode 100644
index 000000000..d053d86a2
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/center.svg
@@ -0,0 +1,3 @@
+<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="1024" height="1024">
+  <path d="M0 472.615385h393.846154v78.76923H0zM630.153846 472.615385h393.846154v78.76923H630.153846zM472.615385 0h78.76923v393.846154h-78.76923zM472.615385 630.153846h78.76923v393.846154h-78.76923z"></path>
+</svg>
\ No newline at end of file
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svgs/color.svg b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/color.svg
new file mode 100644
index 000000000..14d6df765
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/color.svg
@@ -0,0 +1,4 @@
+<svg width="21" height="17" viewBox="0 0 21 17" version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <path d="M7.057923,6.94048365 C7.04979017,6.90724028 7.03471462,6.87699953 7.01408497,6.85190615 L4.23205608,1.83580276 L3.7688805,1 L3.30530819,1.83558828 L0.506021801,6.88386268 C0.49907913,6.8965166 0.493524987,6.90938501 0.489161015,6.92289683 C0.169202902,7.53478935 0,8.2260371 0,8.92500579 C0,11.1720434 1.69064045,13 3.76907885,13 C5.84712054,13 7.53795938,11.1720434 7.53795938,8.92500579 C7.53795938,8.23268578 7.37212861,7.54808671 7.057923,6.94048365 L7.057923,6.94048365 Z"></path>
+  <path d="M14.296,10.288 L8.944,10.288 L7.408,14.152 C7.3279996,14.344001 7.288,14.5039994 7.288,14.632 C7.288,14.9680017 7.77599512,15.2079993 8.752,15.352 C8.86400056,15.3680001 8.9399998,15.4119996 8.98,15.484 C9.0200002,15.5560004 9.04,15.6399995 9.04,15.736 C9.04,15.8320005 9.02400016,15.9599992 8.992,16.12 C8.55999784,16.0879998 8.1040024,16.0600001 7.624,16.036 C7.1439976,16.0119999 6.67200232,16 6.208,16 C5.8879984,16 5.56000168,16.0079999 5.224,16.024 C4.88799832,16.0400001 4.53600184,16.0719998 4.168,16.12 C4.13599984,15.9919994 4.12,15.8640006 4.12,15.736 C4.12,15.6239994 4.1399998,15.5280004 4.18,15.448 C4.2200002,15.3679996 4.30399936,15.3200001 4.432,15.304 C4.92800248,15.2239996 5.29999876,15.1240006 5.548,15.004 C5.79600124,14.8839994 5.97599944,14.6960013 6.088,14.44 L11.872,0.52 C11.9840006,0.24799864 12.135999,0.112 12.328,0.112 C12.3920003,0.112 12.4879994,0.12799984 12.616,0.16 L18.424,14.512 C18.5200005,14.7360011 18.7359983,14.9119994 19.072,15.04 C19.4080017,15.1680006 19.7359984,15.2559998 20.056,15.304 C20.1520005,15.3360002 20.2279997,15.3799997 20.284,15.436 C20.3400003,15.4920003 20.368,15.5919993 20.368,15.736 C20.368,15.8320005 20.3520002,15.9599992 20.32,16.12 C19.8079974,16.0879998 19.3040025,16.0600001 18.808,16.036 C18.3119975,16.0119999 17.8480022,16 17.416,16 C16.9679978,16 16.4560029,16.0119999 15.88,16.036 C15.3039971,16.0600001 14.7840023,16.0879998 14.32,16.12 C14.2879998,15.9599992 14.272,15.8320005 14.272,15.736 C14.272,15.5919993 14.2999997,15.4920003 14.356,15.436 C14.4120003,15.3799997 14.4639998,15.352 14.512,15.352 C14.9280021,15.2719996 15.2639987,15.1800005 15.52,15.076 C15.7760013,14.9719995 15.904,14.816001 15.904,14.608 C15.904,14.5119995 15.8720003,14.3920007 15.808,14.248 L14.296,10.288 Z M13.912,9.304 L11.68,3.424 L9.352,9.304 L13.912,9.304 Z"></path>
+</svg>
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svgs/contain.svg b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/contain.svg
new file mode 100644
index 000000000..3396e936b
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/contain.svg
@@ -0,0 +1,6 @@
+<svg width="34" height="20" viewBox="0 0 34 20" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <g fill="#4A4A4A" fill-rule="evenodd">
+        <path d="M28,3 L28,17 L6,17 L6,3 L28,3 Z M10.6221729,13.9997445 C10.5839635,14.0888999 10.5584905,14.1907918 10.5584905,14.2799471 C10.5584905,14.3945754 10.5839635,14.5092038 10.6476459,14.6110956 C10.7622742,14.8021428 10.9660579,14.9167712 11.1825781,14.9167712 L22.518046,14.9167712 C22.7345662,14.9167712 22.9383499,14.8021428 23.0529782,14.6110956 C23.1166606,14.5092038 23.1421336,14.3945754 23.1421336,14.2799471 C23.1421336,14.1780553 23.1166606,14.0888999 23.0784512,13.9997445 L19.2702434,6.38332901 C19.1683516,6.17954532 18.9645679,6.05218051 18.7480477,6.03944403 L18.7098383,6.03944403 C18.4933181,6.03944403 18.3022709,6.14133587 18.1749061,6.3196466 L15.2455155,11.0066715 L14.1501781,9.18535479 C14.0355498,9.07072646 13.8699756,8.99430758 13.7044013,8.99430758 C13.6661919,8.99430758 13.6407189,8.99430758 13.6025095,9.00704406 C13.3987258,9.0452535 13.2331515,9.17261831 13.1312597,9.35092904 L10.6221729,13.9997445 L10.6221729,13.9997445 L10.6221729,13.9997445 Z M13.9279567,6.11938052 C13.9279567,5.20788931 13.1811928,4.46112543 12.2697016,4.46112543 C11.3582104,4.46112543 10.6114465,5.20788931 10.6114465,6.11938052 C10.6114465,7.03087172 11.3582104,7.7776356 12.2697016,7.7776356 C13.1811928,7.7776356 13.9279567,7.04185354 13.9279567,6.11938052 L13.9279567,6.11938052 L13.9279567,6.11938052 Z"></path>
+        <path d="M0,0 L34,0 L34,20 L0,20 L0,0 Z M2,2 L32,2 L32,18 L2,18 L2,2 Z" opacity="0.6"></path>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svgs/cover.svg b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/cover.svg
new file mode 100644
index 000000000..ccae7519b
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/cover.svg
@@ -0,0 +1,6 @@
+<svg width="34" height="23" viewBox="0 0 34 23" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <g fill="#4A4A4A" fill-rule="evenodd">
+        <path d="M31,3 L31,23 L3,23 L3,3 L31,3 Z M8.46071454,19.1879428 C8.40310965,19.3223542 8.36470639,19.4759672 8.36470639,19.6103786 C8.36470639,19.7831933 8.40310965,19.956008 8.49911781,20.1096211 C8.67193249,20.3976455 8.97915858,20.5704602 9.30558631,20.5704602 L26.3950378,20.5704602 C26.7214656,20.5704602 27.0286916,20.3976455 27.2015063,20.1096211 C27.2975145,19.956008 27.3359177,19.7831933 27.3359177,19.6103786 C27.3359177,19.4567656 27.2975145,19.3223542 27.2399096,19.1879428 L21.4986219,7.70536748 C21.3450089,7.39814138 21.0377828,7.20612507 20.7113551,7.18692344 L20.6537502,7.18692344 C20.3273225,7.18692344 20.039298,7.34053649 19.8472817,7.60935932 L15.4309066,14.6755595 L13.7795663,11.9297263 C13.6067516,11.7569116 13.3571304,11.6417018 13.1075092,11.6417018 C13.0499043,11.6417018 13.0115011,11.6417018 12.9538962,11.6609034 C12.6466701,11.7185083 12.3970489,11.9105246 12.2434358,12.1793475 L8.46071454,19.1879428 L8.46071454,19.1879428 L8.46071454,19.1879428 Z M13.4445433,7.3074364 C13.4445433,5.93326421 12.3187155,4.8074364 10.9445433,4.8074364 C9.57037111,4.8074364 8.4445433,5.93326421 8.4445433,7.3074364 C8.4445433,8.68160858 9.57037111,9.8074364 10.9445433,9.8074364 C12.3187155,9.8074364 13.4445433,8.69816488 13.4445433,7.3074364 L13.4445433,7.3074364 L13.4445433,7.3074364 Z"></path>
+        <path d="M0,0 L34,0 L34,20 L0,20 L0,0 Z M2,2 L32,2 L32,18 L2,18 L2,2 Z" fill-opacity="0.6"></path>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svgs/cursor-default.svg b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/cursor-default.svg
new file mode 100644
index 000000000..ec34c4581
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/cursor-default.svg
@@ -0,0 +1,3 @@
+<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="200" height="200">
+  <path d="M256 0l612.650667 573.824-250.282667 22.741333-45.44 4.096 18.901333 41.557333 151.850667 332.544L631.68 1024l-144.896-336.128-18.176-42.368-33.578667 31.530667-177.792 166.741333L256 0" fill="#ffffff"></path>
+</svg>
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svgs/cursor-pointer.svg b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/cursor-pointer.svg
new file mode 100644
index 000000000..3fa6012cb
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/cursor-pointer.svg
@@ -0,0 +1,4 @@
+<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="200" height="200">
+  <path d="M426.666667 85.333333C473.6 85.333333 512 123.733333 512 170.666667L512 362.666667C512 362.666667 597.333333 352 597.333333 394.666667 597.333333 394.666667 682.666667 384 682.666667 426.666667 682.666667 426.666667 768 416 768 458.666667 768 458.666667 853.333333 448 853.333333 490.666667L853.333333 640C853.333333 682.666667 725.333333 896 725.333333 938.666667L384 938.666667C384 938.666667 298.666667 640 170.666667 554.666667 170.666667 554.666667 128 298.666667 341.333333 512L341.333333 170.666667C341.333333 123.733333 379.733333 85.333333 426.666667 85.333333Z" fill="#ffffff">
+  </path>
+</svg>
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svgs/cursor.svg b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/cursor.svg
new file mode 100644
index 000000000..6089ed882
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/cursor.svg
@@ -0,0 +1,3 @@
+<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="200" height="200">
+  <path d="M597.333333 981.333333C597.333333 981.333333 597.333333 981.333333 597.333333 981.333333c-17.066667 0-34.133333-12.8-38.4-29.866667l-98.133333-294.4c-8.533333-21.333333 4.266667-46.933333 25.6-55.466667 21.333333-8.533333 46.933333 4.266667 55.466667 25.6l59.733333 183.466667 260.266667-652.8L209.066667 422.4l183.466667 59.733333c21.333333 8.533333 34.133333 29.866667 25.6 55.466667-8.533333 21.333333-29.866667 34.133333-55.466667 25.6l-294.4-98.133333C55.466667 460.8 42.666667 443.733333 42.666667 426.666667c0-17.066667 8.533333-34.133333 25.6-42.666667l853.333333-341.333333C938.666667 38.4 955.733333 42.666667 968.533333 55.466667 981.333333 68.266667 985.6 85.333333 977.066667 102.4l-341.333333 853.333333C631.466667 972.8 614.4 981.333333 597.333333 981.333333z" fill="#ffffff"></path>
+  <path d="M170.666667 981.333333c-34.133333 0-64-12.8-89.6-38.4-51.2-51.2-51.2-132.266667 0-179.2l268.8-268.8c17.066667-17.066667 42.666667-17.066667 59.733333 0s17.066667 42.666667 0 59.733333l-268.8 268.8C132.266667 832 128 840.533333 128 853.333333s4.266667 21.333333 12.8 29.866667c17.066667 17.066667 42.666667 17.066667 59.733333 0l268.8-268.8c17.066667-17.066667 42.666667-17.066667 59.733333 0s17.066667 42.666667 0 59.733333l-268.8 268.8C234.666667 968.533333 204.8 981.333333 170.666667 981.333333z" fill="#ffffff"></path></svg>
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svgs/dir.svg b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/dir.svg
new file mode 100644
index 000000000..57f385b52
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/dir.svg
@@ -0,0 +1,3 @@
+<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="200" height="200">
+  <path d="M814.622854 508.742816 514.923074 145.338133 209.3751 508.742816 448.612832 508.742816 448.612832 878.661867 575.386144 878.661867 575.386144 508.742816Z"></path>
+</svg>
\ No newline at end of file
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svgs/direction-column.svg b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/direction-column.svg
new file mode 100644
index 000000000..9581a8712
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/direction-column.svg
@@ -0,0 +1 @@
+<svg width="9" height="18" viewBox="0 0 9 18"><g fill="currentColor" fill-rule="evenodd"><path d="M0 6h9v5H0zm5 9v-3H4v3H2l2.5 3L7 15H5z"></path><path opacity=".4" d="M1 1h7v3H1z"></path><path d="M1 1v3h7V1H1zM0 0h9v5H0V0z"></path></g></svg>
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svgs/direction-row.svg b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/direction-row.svg
new file mode 100644
index 000000000..c65e2f070
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/direction-row.svg
@@ -0,0 +1 @@
+<svg width="19" height="9" viewBox="0 0 19 9"><g fill="currentColor" fill-rule="evenodd"><path d="M16 4h-4v1h4v2l3-2.5L16 2v2zM6 0h5v9H6z"></path><path opacity=".4" d="M1 1h3v7H1z"></path><path d="M1 1v7h3V1H1zM0 0h5v9H0V0z"></path></g></svg>
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svgs/fill.svg b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/fill.svg
new file mode 100644
index 000000000..f2eddbff2
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/fill.svg
@@ -0,0 +1,3 @@
+<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="1024" height="1024">
+  <path d="M881.2544 1004.3392c-50.9952 0-92.3648-41.3696-92.3648-92.3648 0-50.9952 92.3648-215.6544 92.3648-215.6544s92.3648 164.6592 92.3648 215.6544S932.4544 1004.3392 881.2544 1004.3392L881.2544 1004.3392zM50.3808 546.6112 449.9456 151.552l399.7696 395.264-399.7696 395.264L50.3808 546.6112 50.3808 546.6112zM449.9456 239.2064l-277.0944 272.384 554.3936 0L449.9456 239.2064 449.9456 239.2064zM272.384 63.488l44.4416-43.8272L449.9456 151.552 405.504 195.3792 272.384 63.488 272.384 63.488zM272.384 63.488"></path>
+</svg>
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svgs/fixed.svg b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/fixed.svg
new file mode 100644
index 000000000..223dde32e
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/fixed.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><path d="M314.816 666.624l-187.52-198.72 177.792 44.096 285.952-265.024L591.04 129.152l305.472 309.248L760.832 431.04 516.16 732.928l29.184 161.984L365.184 710.848l-233.472 183.552L314.816 666.624z"></path></svg>
\ No newline at end of file
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svgs/flex.svg b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/flex.svg
new file mode 100644
index 000000000..2d4c82456
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/flex.svg
@@ -0,0 +1 @@
+<svg width="23" height="14" viewBox="0 0 23 14"><g fill="currentColor" fill-rule="evenodd"><path d="M21 2v10H2V2h19zm1-1H1v12h21V1z" opacity=".15"></path><path d="M1.2 0A1.2 1.2 0 0 0 0 1.2v11.6A1.2 1.2 0 0 0 1.2 14h20.6a1.2 1.2 0 0 0 1.2-1.2V1.2A1.2 1.2 0 0 0 21.8 0H1.2zM22 13H1V1h21v12z"></path><path opacity=".4" d="M3 3h5v8H3z"></path><path d="M4 4v6h3V4H4zm4-1v8H3V3h5z"></path><path opacity=".4" d="M9 3h5v8H9z"></path><path d="M10 4v6h3V4h-3zm4-1v8H9V3h5z"></path><path opacity=".4" d="M15 3h5v8h-5z"></path><path d="M16 4v6h3V4h-3zm4-1v8h-5V3h5z"></path></g></svg>
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svgs/font-family.svg b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/font-family.svg
new file mode 100644
index 000000000..c71ef4982
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/font-family.svg
@@ -0,0 +1,3 @@
+<svg width="29" height="19" viewBox="0 0 29 19" version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <path d="M11.856,10.008 L12,9.72 L13.392,9.672 C13.8880025,8.69599512 14.4599968,7.85600352 15.108,7.152 C15.7560032,6.44799648 16.4719961,5.84400252 17.256,5.34 C18.0400039,4.83599748 18.8879954,4.41200172 19.8,4.068 C20.7120046,3.72399828 21.6799949,3.42400128 22.704,3.168 L22.704,3.12 C22.2239976,3.12 21.7360025,3.11200008 21.24,3.096 C20.7439975,3.07999992 20.2160028,3.06400008 19.656,3.048 C19.0959972,3.03199992 18.4880033,3.01600008 17.832,3 C17.1759967,2.98399992 16.448004,2.976 15.648,2.976 C14.655995,2.976 13.6400052,3.00399972 12.6,3.06 C11.5599948,3.11600028 10.5480049,3.21999924 9.564,3.372 C8.57999508,3.52400076 7.6480044,3.72799872 6.768,3.984 C5.8879956,4.24000128 5.12400324,4.56399804 4.476,4.956 C3.82799676,5.34800196 3.31200192,5.81199732 2.928,6.348 C2.54399808,6.88400268 2.352,7.51999632 2.352,8.256 C2.352,8.78400264 2.4719988,9.2279982 2.712,9.588 C2.9520012,9.9480018 3.2519982,10.2359989 3.612,10.452 C3.9720018,10.6680011 4.3719978,10.8199996 4.812,10.908 C5.2520022,10.9960004 5.671998,11.04 6.072,11.04 C6.6320028,11.04 7.2519966,10.9520009 7.932,10.776 C8.6120034,10.5999991 9.25599696,10.3400017 9.864,9.996 C10.472003,9.65199828 10.979998,9.2200026 11.388,8.7 C11.796002,8.1799974 12,7.58400336 12,6.912 C12,6.5919984 11.9720003,6.28000152 11.916,5.976 C11.8599997,5.67199848 11.7680006,5.37600144 11.64,5.088 L11.856,4.968 C11.9360004,5.11200072 12.0279995,5.34799836 12.132,5.676 C12.2360005,6.00400164 12.288,6.4479972 12.288,7.008 C12.288,7.808004 12.1000019,8.53599672 11.724,9.192 C11.3479981,9.84800328 10.860003,10.4079977 10.26,10.872 C9.659997,11.3360023 8.99200368,11.6959987 8.256,11.952 C7.51999632,12.2080013 6.7920036,12.336 6.072,12.336 C5.5919976,12.336 5.1120024,12.2480009 4.632,12.072 C4.1519976,11.8959991 3.712002,11.6400017 3.312,11.304 C2.911998,10.9679983 2.58800124,10.5560024 2.34,10.068 C2.09199876,9.57999756 1.968,9.02400312 1.968,8.4 C1.968,7.32799464 2.25599712,6.392004 2.832,5.592 C3.40800288,4.791996 4.15999536,4.10800284 5.088,3.54 C6.01600464,2.97199716 7.06799412,2.50000188 8.244,2.124 C9.42000588,1.74799812 10.603994,1.45200108 11.796,1.236 C12.988006,1.01999892 14.1399944,0.8720004 15.252,0.792 C16.3640056,0.7119996 17.3119961,0.672 18.096,0.672 C19.2160056,0.672 20.2159956,0.67999992 21.096,0.696 C21.9760044,0.71200008 22.7639965,0.73199988 23.46,0.756 C24.1560035,0.78000012 24.7759973,0.80399988 25.32,0.828 C25.8640027,0.85200012 26.3599978,0.864 26.808,0.864 C26.9840009,0.864 27.1839989,0.8839998 27.408,0.924 C27.6320011,0.9640002 27.839999,1.03199952 28.032,1.128 C28.224001,1.22400048 28.3879993,1.34799924 28.524,1.5 C28.6600007,1.65200076 28.728,1.83999888 28.728,2.064 C28.728,2.36800152 28.624001,2.61199908 28.416,2.796 C28.207999,2.98000092 27.9520015,3.11599956 27.648,3.204 C27.3439985,3.29200044 27.0320016,3.34799988 26.712,3.372 C26.3919984,3.39600012 26.1200011,3.408 25.896,3.408 C25.7199991,3.408 25.5200011,3.40000008 25.296,3.384 C25.0719989,3.36799992 24.8480011,3.35200008 24.624,3.336 C24.3999989,3.31999992 24.188001,3.30400008 23.988,3.288 C23.787999,3.27199992 23.6240006,3.264 23.496,3.264 C22.7599963,3.264 22.0560034,3.48799776 21.384,3.936 C20.7119966,4.38400224 20.0880029,4.93199676 19.512,5.58 C18.9359971,6.22800324 18.4240022,6.91599636 17.976,7.644 C17.5279978,8.37200364 17.1440016,9.0159972 16.824,9.576 C17.3360026,9.52799976 17.7719982,9.4640004 18.132,9.384 C18.4920018,9.3039996 18.7599991,9.20800056 18.936,9.096 C19.0160004,9.04799976 19.0999996,8.96000064 19.188,8.832 C19.2760004,8.70399936 19.3679995,8.56800072 19.464,8.424 C19.5600005,8.27999928 19.6599995,8.15200056 19.764,8.04 C19.8680005,7.92799944 19.9759994,7.872 20.088,7.872 L22.728,7.872 C21.6719947,8.73600432 20.6800046,9.66399504 19.752,10.656 C18.8239954,11.648005 17.9920037,12.7199942 17.256,13.872 L17.04,13.896 C17.1840007,13.1599963 17.4079985,12.4480034 17.712,11.76 C18.0160015,11.0719966 18.3279984,10.3840034 18.648,9.696 C18.4239989,9.696 18.1240019,9.72799968 17.748,9.792 C17.3719981,9.85600032 17.0240016,9.89599992 16.704,9.912 C16.0799969,11.1440062 15.3920038,12.2679949 14.64,13.284 C13.8879962,14.3000051 13.0400047,15.1719964 12.096,15.9 C11.1519953,16.6280036 10.0960058,17.191998 8.928,17.592 C7.75999416,17.992002 6.44800728,18.192 4.992,18.192 C4.5119976,18.192 4.0120026,18.1400005 3.492,18.036 C2.9719974,17.9319995 2.49600216,17.7600012 2.064,17.52 C1.63199784,17.2799988 1.2760014,16.964002 0.996,16.572 C0.7159986,16.179998 0.576,15.6960029 0.576,15.12 C0.576,14.8799988 0.62399952,14.6520011 0.72,14.436 C0.81600048,14.2199989 0.93999924,14.0280008 1.092,13.86 C1.24400076,13.6919992 1.42799892,13.5560005 1.644,13.452 C1.86000108,13.3479995 2.0879988,13.296 2.328,13.296 C2.74400208,13.296 3.09999852,13.4199988 3.396,13.668 C3.69200148,13.9160012 3.84,14.2559978 3.84,14.688 C3.84,15.0560018 3.74800092,15.3679987 3.564,15.624 C3.37999908,15.8800013 3.12000168,16.0639994 2.784,16.176 C2.88000048,16.8320033 3.1479978,17.2839988 3.588,17.532 C4.0280022,17.7800012 4.55199696,17.904 5.16,17.904 C6.24800544,17.904 7.18799604,17.6320027 7.98,17.088 C8.77200396,16.5439973 9.47599692,15.872004 10.092,15.072 C10.7080031,14.271996 11.2639975,13.4120046 11.76,12.492 C12.2560025,11.5719954 12.7439976,10.7280038 13.224,9.96 L11.856,10.008 Z"></path>
+</svg>
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svgs/font-size.svg b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/font-size.svg
new file mode 100644
index 000000000..e0e40dcdc
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/font-size.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="25" height="17" viewBox="0 0 25 17" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <path d="M5.194,7.474 L5.194,14.95 C5.194,15.1646677 5.28266578,15.3163329 5.46,15.405 C5.63733422,15.4936671 5.9359979,15.5613331 6.356,15.608 C6.45866718,15.608 6.51,15.6826659 6.51,15.832 C6.51,15.8973337 6.50066676,15.9766662 6.482,16.07 C6.18333184,16.0513332 5.86833499,16.0350001 5.537,16.021 C5.20566501,16.0069999 4.87200168,16 4.536,16 C4.2093317,16 3.87566837,16.0069999 3.535,16.021 C3.19433163,16.0350001 2.87466816,16.0513332 2.576,16.07 C2.55733324,15.9766662 2.548,15.8973337 2.548,15.832 C2.548,15.7013327 2.5946662,15.6266668 2.688,15.608 C3.1080021,15.5519997 3.4113324,15.4820004 3.598,15.398 C3.7846676,15.3139996 3.878,15.1646677 3.878,14.95 L3.878,7.474 L2.436,7.474 C2.1559986,7.474 1.92033429,7.50199972 1.729,7.558 C1.53766571,7.61400028 1.3720007,7.69799944 1.232,7.81 C1.0919993,7.92200056 0.97066718,8.06666578 0.868,8.244 C0.76533282,8.42133422 0.65800056,8.6266655 0.546,8.86 C0.52733324,8.9066669 0.49700021,8.93933324 0.455,8.958 C0.41299979,8.97666676 0.37333352,8.986 0.336,8.986 C0.23333282,8.986 0.14466704,8.95800028 0.07,8.902 C0.1633338,8.56599832 0.2333331,8.26733464 0.28,8.006 C0.3266669,7.74466536 0.36866648,7.52766753 0.406,7.355 C0.44333352,7.18233247 0.48299979,7.0493338 0.525,6.956 C0.56700021,6.8626662 0.6346662,6.816 0.728,6.816 C0.79333366,6.816 0.88666606,6.82066662 1.008,6.83 C1.12933394,6.83933338 1.25766599,6.84866662 1.393,6.858 C1.52833401,6.86733338 1.6659993,6.87666662 1.806,6.886 C1.9460007,6.89533338 2.07666606,6.9 2.198,6.9 L6.874,6.9 C6.98600056,6.9 7.1119993,6.89533338 7.252,6.886 C7.3920007,6.87666662 7.5319993,6.86733338 7.672,6.858 C7.8120007,6.84866662 7.94033275,6.83933338 8.057,6.83 C8.17366725,6.82066662 8.26933296,6.816 8.344,6.816 C8.4373338,6.816 8.50499979,6.86499951 8.547,6.963 C8.58900021,7.06100049 8.62866648,7.19866578 8.666,7.376 C8.70333352,7.55333422 8.74299979,7.77266536 8.785,8.034 C8.82700021,8.29533464 8.89933282,8.58466508 9.002,8.902 C8.9553331,8.92066676 8.91100021,8.93933324 8.869,8.958 C8.82699979,8.97666676 8.77800028,8.986 8.722,8.986 C8.68466648,8.986 8.6426669,8.97666676 8.596,8.958 C8.5493331,8.93933324 8.51666676,8.9066669 8.498,8.86 C8.39533282,8.6266655 8.29266718,8.42133422 8.19,8.244 C8.08733282,8.06666578 7.96833401,7.92200056 7.833,7.81 C7.69766599,7.69799944 7.53433429,7.61400028 7.343,7.558 C7.15166571,7.50199972 6.9160014,7.474 6.636,7.474 L5.194,7.474 Z M17.962,1.384 L17.962,14.2 C17.962,14.5680018 18.1139985,14.8279992 18.418,14.98 C18.7220015,15.1320008 19.2339964,15.2479996 19.954,15.328 C20.1300009,15.328 20.218,15.4559987 20.218,15.712 C20.218,15.8240006 20.2020002,15.9599992 20.17,16.12 C19.6579974,16.0879998 19.1180028,16.0600001 18.55,16.036 C17.9819972,16.0119999 17.4100029,16 16.834,16 C16.2739972,16 15.7020029,16.0119999 15.118,16.036 C14.5339971,16.0600001 13.9860026,16.0879998 13.474,16.12 C13.4419998,15.9599992 13.426,15.8240006 13.426,15.712 C13.426,15.4879989 13.5059992,15.3600002 13.666,15.328 C14.3860036,15.2319995 14.9059984,15.1120007 15.226,14.968 C15.5460016,14.8239993 15.706,14.5680018 15.706,14.2 L15.706,1.384 L13.234,1.384 C12.7539976,1.384 12.3500016,1.43199952 12.022,1.528 C11.6939984,1.62400048 11.4100012,1.76799904 11.17,1.96 C10.9299988,2.15200096 10.7220009,2.39999848 10.546,2.704 C10.3699991,3.00800152 10.186001,3.359998 9.994,3.76 C9.96199984,3.8400004 9.91000036,3.89599984 9.838,3.928 C9.76599964,3.96000016 9.69800032,3.976 9.634,3.976 C9.45799912,3.976 9.30600064,3.92800048 9.178,3.832 C9.3380008,3.25599712 9.4579996,2.74400224 9.538,2.296 C9.6180004,1.84799776 9.68999968,1.47600148 9.754,1.18 C9.81800032,0.88399852 9.88599964,0.6560008 9.958,0.496 C10.0300004,0.3359992 10.1459992,0.256 10.306,0.256 C10.4180006,0.256 10.577999,0.26399992 10.786,0.28 C10.994001,0.29600008 11.2139988,0.31199992 11.446,0.328 C11.6780012,0.34400008 11.9139988,0.35999992 12.154,0.376 C12.3940012,0.39200008 12.617999,0.4 12.826,0.4 L20.842,0.4 C21.034001,0.4 21.2499988,0.39200008 21.49,0.376 C21.7300012,0.35999992 21.9699988,0.34400008 22.21,0.328 C22.4500012,0.31199992 22.669999,0.29600008 22.87,0.28 C23.070001,0.26399992 23.2339994,0.256 23.362,0.256 C23.5220008,0.256 23.6379996,0.33999916 23.71,0.508 C23.7820004,0.67600084 23.8499997,0.91199848 23.914,1.216 C23.9780003,1.52000152 24.0459996,1.89599776 24.118,2.344 C24.1900004,2.79200224 24.3139991,3.28799728 24.49,3.832 C24.4099996,3.86400016 24.3340004,3.89599984 24.262,3.928 C24.1899996,3.96000016 24.1060005,3.976 24.01,3.976 C23.9459997,3.976 23.8740004,3.96000016 23.794,3.928 C23.7139996,3.89599984 23.6580002,3.8400004 23.626,3.76 C23.4499991,3.359998 23.2740009,3.00800152 23.098,2.704 C22.9219991,2.39999848 22.7180012,2.15200096 22.486,1.96 C22.2539988,1.76799904 21.9740016,1.62400048 21.646,1.528 C21.3179984,1.43199952 20.9140024,1.384 20.434,1.384 L17.962,1.384 Z"></path>
+</svg>
\ No newline at end of file
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svgs/font-style.svg b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/font-style.svg
new file mode 100644
index 000000000..805afd246
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/font-style.svg
@@ -0,0 +1,3 @@
+<svg width="29" height="18" viewBox="0 0 29 18" version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <path d="M16.2109375,16.4257812 L16.0234375,17.1171875 C15.6171855,17.0859373 15.2109395,17.0625001 14.8046875,17.046875 C14.1640593,17.0156248 13.5546904,17 12.9765625,17 C12.0078077,17 10.6953208,17.0390621 9.0390625,17.1171875 L9.1796875,16.4257812 C10.5546944,16.1445298 11.3320304,15.8398454 11.5117188,15.5117188 C11.6132818,15.3476554 11.7187495,14.8750039 11.828125,14.09375 C11.9375005,13.3124961 12.0156248,12.6093781 12.0625,11.984375 C11.1406204,11.9531248 9.99610059,11.9375 8.62890625,11.9375 C8.0195282,11.9375 7.50781457,11.9531248 7.09375,11.984375 C6.99999953,12.1093756 6.93164084,12.1992185 6.88867187,12.2539062 C6.84570291,12.308594 6.78515664,12.3867182 6.70703125,12.4882812 C6.54296793,12.7070323 6.18554963,13.1914025 5.63476562,13.9414062 C5.08398162,14.69141 4.79687512,15.0859373 4.7734375,15.125 C4.51562371,15.4453141 4.38671875,15.6796868 4.38671875,15.828125 C4.38671875,15.9453131 4.4414057,16.0351559 4.55078125,16.0976562 C4.6601568,16.1601566 4.98827852,16.2460932 5.53515625,16.3554688 C5.76953242,16.402344 5.89062496,16.4257812 5.8984375,16.4257812 L5.69921875,17.1171875 C5.4492175,17.1015624 5.02734672,17.0781252 4.43359375,17.046875 C3.8242157,17.0156248 3.32812691,17 2.9453125,17 C2.42968492,17 1.53516262,17.0390621 0.26171875,17.1171875 L0.47265625,16.4257812 C1.2617227,16.2851555 1.80663912,16.1230478 2.10742188,15.9394531 C2.40820463,15.7558585 2.81640367,15.3320346 3.33203125,14.6679688 C3.42578172,14.5351556 3.63085779,14.2675801 3.94726562,13.8652344 C4.26367346,13.4628886 4.54882686,13.0976579 4.80273437,12.7695312 C5.05664189,12.4414046 5.29296766,12.1406264 5.51171875,11.8671875 L7.0703125,9.8984375 C7.80469117,8.97655789 8.34179518,8.3007834 8.68164062,7.87109375 C9.02148607,7.4414041 9.37695127,6.98633053 9.74804688,6.50585938 C10.1191425,6.02538822 10.6230437,5.35742615 11.2597656,4.50195312 C11.8964876,3.6464801 12.7578071,2.48438234 13.84375,1.015625 C13.8984378,0.960937227 13.976562,0.863281953 14.078125,0.72265625 C14.179688,0.582030547 14.2460936,0.488281484 14.2773437,0.44140625 L15.0625,0.44140625 C15.0546875,0.566406875 15.0175785,0.98241834 14.9511719,1.68945312 C14.8847653,2.39648791 14.8281252,3.00390371 14.78125,3.51171875 C14.7265622,3.98828363 14.6640629,4.57421527 14.59375,5.26953125 C14.5234371,5.96484723 14.4687502,6.55663818 14.4296875,7.04492188 C14.3906248,7.53320557 14.3417972,8.17577727 14.2832031,8.97265625 C14.2246091,9.76953523 14.1406255,10.8710867 14.03125,12.2773438 C13.9218745,14.0429776 13.8671875,15.05078 13.8671875,15.3007812 C13.8671875,15.4726571 13.9023434,15.6074214 13.9726562,15.7050781 C14.0429691,15.8027349 14.2324203,15.9062495 14.5410156,16.015625 C14.8496109,16.1250005 15.2968721,16.2382807 15.8828125,16.3554688 C16.1171887,16.402344 16.2265626,16.4257812 16.2109375,16.4257812 L16.2109375,16.4257812 Z M7.9140625,10.859375 L12.1796875,10.859375 L12.90625,4.1796875 L12.859375,4.1328125 L7.9140625,10.859375 Z M27.6132812,14.140625 L28,14.6445312 C27.5312477,15.1132836 27.0175809,15.5624979 26.4589844,15.9921875 C25.9003878,16.4218771 25.4062521,16.7539051 24.9765625,16.9882812 C24.5468729,17.2226574 24.2421884,17.3398438 24.0625,17.3398438 C23.6953107,17.3398438 23.5117188,17.1132835 23.5117188,16.6601562 C23.5117188,16.4414052 23.5761712,16.0800806 23.7050781,15.5761719 C23.833985,15.0722631 23.9218748,14.7851566 23.96875,14.7148438 C24.0390629,14.4335923 24.1171871,14.1640638 24.203125,13.90625 L24.15625,13.859375 C23.4999967,14.6953167 22.7656291,15.4843713 21.953125,16.2265625 C21.1406209,16.9687537 20.4023471,17.3398438 19.7382812,17.3398438 C19.2148411,17.3398438 18.7617207,17.0839869 18.3789062,16.5722656 C17.9960918,16.0605443 17.8046875,15.3164111 17.8046875,14.3398438 C17.8046875,13.3398388 18.0136698,12.3476612 18.4316406,11.3632812 C18.8496115,10.3789013 19.4257776,9.49219145 20.1601562,8.703125 C20.8945349,7.91405855 21.7421827,7.28320549 22.703125,6.81054688 C23.6640673,6.33788826 24.6757759,6.1015625 25.7382812,6.1015625 C25.8632819,6.1015625 26.2441374,6.14062461 26.8808594,6.21875 C27.5175813,6.29687539 27.882812,6.33984371 27.9765625,6.34765625 L28.1171875,6.62890625 C27.6640602,7.56641094 27.2382832,8.63671273 26.8398438,9.83984375 C26.4414043,11.0429748 26.1230481,12.1249952 25.8847656,13.0859375 C25.6464832,14.0468798 25.5273438,14.6171866 25.5273438,14.796875 C25.5273438,15.1171891 25.624999,15.2773438 25.8203125,15.2773438 C26.0703138,15.2773438 26.5820274,14.9726593 27.3554688,14.3632812 C27.4804694,14.2382806 27.566406,14.1640626 27.6132812,14.140625 L27.6132812,14.140625 Z M25.9140625,7.42578125 C25.312497,7.23046777 24.8398455,7.1328125 24.4960938,7.1328125 C23.8554655,7.1328125 23.2460966,7.33007615 22.6679688,7.72460938 C22.0898409,8.1191426 21.5781272,8.6542935 21.1328125,9.33007812 C20.6874978,10.0058628 20.3359388,10.7617146 20.078125,11.5976562 C19.8203112,12.4335979 19.6914062,13.2578084 19.6914062,14.0703125 C19.6914062,14.6875031 19.7949208,15.1425767 20.0019531,15.4355469 C20.2089854,15.7285171 20.4179677,15.875 20.6289062,15.875 C20.9335953,15.875 21.4003875,15.6171901 22.0292969,15.1015625 C22.6582063,14.5859349 23.2421848,13.9218791 23.78125,13.109375 C24.1328143,12.60156 24.4257801,12.0332063 24.6601562,11.4042969 C24.8945324,10.7753875 25.2304666,9.710945 25.6679688,8.2109375 C25.6835938,8.1718748 25.724609,8.04687605 25.7910156,7.8359375 C25.8574222,7.62499895 25.8984374,7.48828156 25.9140625,7.42578125 L25.9140625,7.42578125 Z"></path>
+</svg>
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svgs/font-weight.svg b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/font-weight.svg
new file mode 100644
index 000000000..5770b41b0
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/font-weight.svg
@@ -0,0 +1,5 @@
+<svg width="30" height="17" viewBox="0 0 30 17" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <path d="M10.296,10.288 L4.944,10.288 L3.408,14.152 C3.3279996,14.344001 3.288,14.5039994 3.288,14.632 C3.288,14.9680017 3.77599512,15.2079993 4.752,15.352 C4.86400056,15.3680001 4.9399998,15.4119996 4.98,15.484 C5.0200002,15.5560004 5.04,15.6399995 5.04,15.736 C5.04,15.8320005 5.02400016,15.9599992 4.992,16.12 C4.55999784,16.0879998 4.1040024,16.0600001 3.624,16.036 C3.1439976,16.0119999 2.67200232,16 2.208,16 C1.8879984,16 1.56000168,16.0079999 1.224,16.024 C0.88799832,16.0400001 0.53600184,16.0719998 0.168,16.12 C0.13599984,15.9919994 0.12,15.8640006 0.12,15.736 C0.12,15.6239994 0.1399998,15.5280004 0.18,15.448 C0.2200002,15.3679996 0.30399936,15.3200001 0.432,15.304 C0.92800248,15.2239996 1.29999876,15.1240006 1.548,15.004 C1.79600124,14.8839994 1.97599944,14.6960013 2.088,14.44 L7.872,0.52 C7.98400056,0.24799864 8.13599904,0.112 8.328,0.112 C8.39200032,0.112 8.48799936,0.12799984 8.616,0.16 L14.424,14.512 C14.5200005,14.7360011 14.7359983,14.9119994 15.072,15.04 C15.4080017,15.1680006 15.7359984,15.2559998 16.056,15.304 C16.1520005,15.3360002 16.2279997,15.3799997 16.284,15.436 C16.3400003,15.4920003 16.368,15.5919993 16.368,15.736 C16.368,15.8320005 16.3520002,15.9599992 16.32,16.12 C15.8079974,16.0879998 15.3040025,16.0600001 14.808,16.036 C14.3119975,16.0119999 13.8480022,16 13.416,16 C12.9679978,16 12.4560029,16.0119999 11.88,16.036 C11.3039971,16.0600001 10.7840023,16.0879998 10.32,16.12 C10.2879998,15.9599992 10.272,15.8320005 10.272,15.736 C10.272,15.5919993 10.2999997,15.4920003 10.356,15.436 C10.4120003,15.3799997 10.4639998,15.352 10.512,15.352 C10.9280021,15.2719996 11.2639987,15.1800005 11.52,15.076 C11.7760013,14.9719995 11.904,14.816001 11.904,14.608 C11.904,14.5119995 11.8720003,14.3920007 11.808,14.248 L10.296,10.288 Z M9.912,9.304 L7.68,3.424 L5.352,9.304 L9.912,9.304 Z" opacity="0.7"></path>
+    <path d="M16.296,10.288 L10.944,10.288 L9.408,14.152 C9.3279996,14.344001 9.288,14.5039994 9.288,14.632 C9.288,14.9680017 9.77599512,15.2079993 10.752,15.352 C10.8640006,15.3680001 10.9399998,15.4119996 10.98,15.484 C11.0200002,15.5560004 11.04,15.6399995 11.04,15.736 C11.04,15.8320005 11.0240002,15.9599992 10.992,16.12 C10.5599978,16.0879998 10.1040024,16.0600001 9.624,16.036 C9.1439976,16.0119999 8.67200232,16 8.208,16 C7.8879984,16 7.56000168,16.0079999 7.224,16.024 C6.88799832,16.0400001 6.53600184,16.0719998 6.168,16.12 C6.13599984,15.9919994 6.12,15.8640006 6.12,15.736 C6.12,15.6239994 6.1399998,15.5280004 6.18,15.448 C6.2200002,15.3679996 6.30399936,15.3200001 6.432,15.304 C6.92800248,15.2239996 7.29999876,15.1240006 7.548,15.004 C7.79600124,14.8839994 7.97599944,14.6960013 8.088,14.44 L13.872,0.52 C13.9840006,0.24799864 14.135999,0.112 14.328,0.112 C14.3920003,0.112 14.4879994,0.12799984 14.616,0.16 L20.424,14.512 C20.5200005,14.7360011 20.7359983,14.9119994 21.072,15.04 C21.4080017,15.1680006 21.7359984,15.2559998 22.056,15.304 C22.1520005,15.3360002 22.2279997,15.3799997 22.284,15.436 C22.3400003,15.4920003 22.368,15.5919993 22.368,15.736 C22.368,15.8320005 22.3520002,15.9599992 22.32,16.12 C21.8079974,16.0879998 21.3040025,16.0600001 20.808,16.036 C20.3119975,16.0119999 19.8480022,16 19.416,16 C18.9679978,16 18.4560029,16.0119999 17.88,16.036 C17.3039971,16.0600001 16.7840023,16.0879998 16.32,16.12 C16.2879998,15.9599992 16.272,15.8320005 16.272,15.736 C16.272,15.5919993 16.2999997,15.4920003 16.356,15.436 C16.4120003,15.3799997 16.4639998,15.352 16.512,15.352 C16.9280021,15.2719996 17.2639987,15.1800005 17.52,15.076 C17.7760013,14.9719995 17.904,14.816001 17.904,14.608 C17.904,14.5119995 17.8720003,14.3920007 17.808,14.248 L16.296,10.288 Z M15.912,9.304 L13.68,3.424 L11.352,9.304 L15.912,9.304 Z" opacity="0.9"></path>
+    <path d="M22.96,10.72 L17.92,10.72 L16.672,14.056 C16.6239998,14.1360004 16.5920001,14.2239995 16.576,14.32 C16.5599999,14.4160005 16.552,14.4879998 16.552,14.536 C16.552,14.7120009 16.6359992,14.8559994 16.804,14.968 C16.9720008,15.0800006 17.3119974,15.1759996 17.824,15.256 C18.0480011,15.2880002 18.16,15.4399986 18.16,15.712 C18.16,15.8240006 18.1440002,15.9599992 18.112,16.12 C17.6799978,16.0879998 17.2240024,16.0600001 16.744,16.036 C16.2639976,16.0119999 15.7920023,16 15.328,16 C15.0079984,16 14.6720018,16.0079999 14.32,16.024 C13.9679982,16.0400001 13.5760022,16.0719998 13.144,16.12 C13.1119998,16.0559997 13.096,15.9840004 13.096,15.904 L13.096,15.712 C13.096,15.4079985 13.199999,15.2480001 13.408,15.232 C13.9040025,15.1359995 14.2599989,15.0320006 14.476,14.92 C14.6920011,14.8079994 14.8639994,14.6160014 14.992,14.344 L20.776,0.52 C20.9040006,0.24799864 21.0959987,0.112 21.352,0.112 C21.4320004,0.112 21.5119996,0.11599996 21.592,0.124 C21.6720004,0.13200004 21.7599995,0.14399992 21.856,0.16 L27.64,14.416 C27.7360005,14.6560012 27.9199986,14.8359994 28.192,14.956 C28.4640014,15.0760006 28.7599984,15.1599998 29.08,15.208 C29.3200012,15.2560002 29.44,15.4159986 29.44,15.688 C29.44,15.8160006 29.4240002,15.9599992 29.392,16.12 C28.8799974,16.0879998 28.3760025,16.0600001 27.88,16.036 C27.3839975,16.0119999 26.9200022,16 26.488,16 C26.2639989,16 25.9920016,16.004 25.672,16.012 C25.3519984,16.02 25.0240017,16.0319999 24.688,16.048 C24.3519983,16.0640001 24.0200016,16.076 23.692,16.084 C23.3639984,16.092 23.0880011,16.1039999 22.864,16.12 C22.8319998,16.0559997 22.816,15.9840004 22.816,15.904 L22.816,15.712 C22.816,15.5679993 22.8439997,15.4600004 22.9,15.388 C22.9560003,15.3159996 23.0159997,15.2720001 23.08,15.256 C23.4960021,15.1759996 23.803999,15.0840005 24.004,14.98 C24.204001,14.8759995 24.304,14.720001 24.304,14.512 C24.304,14.4159995 24.2800002,14.2960007 24.232,14.152 L22.96,10.72 Z M22.504,9.52 L20.464,4.12 L18.376,9.52 L22.504,9.52 Z"></path>
+</svg>
\ No newline at end of file
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svgs/handle.svg b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/handle.svg
new file mode 100644
index 000000000..5d82f5ff1
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/handle.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 1566 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="1566" height="1024"><path d="M445.44 291.84h675.84v153.6H445.44zM220.16 578.56h1126.4v153.6H220.16zM0 870.4h1566.72v153.6H0zM670.72 0h230.4v153.6h-230.4z"></path></svg>
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svgs/height.svg b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/height.svg
new file mode 100644
index 000000000..7a6533210
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/height.svg
@@ -0,0 +1,4 @@
+<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="1024" height="1024">
+  <path d="M525.837333 51.733333c-3.406667-3.397333-8.109333-5.126667-13.228-4.874666l-0.348 0.017333-0.34-0.017333c-5.110667-0.252-9.813333 1.477333-13.245333 4.892l-103.454667 103.053333-4.902666 4.986667-26.517334 26.425333-9.621333 9.626667c-3.789333 3.789333-5.876 8.733333-5.876 13.912 0 4.710667 1.773333 9.08 5.006667 12.313333 5.414667 5.396 13.724 6.516 20.92 2.901333l36.817333-36.677333 4.902667-4.978667 78.857333-78.550666v343.032c0 9.576 7.822667 17.370667 17.453333 17.370666 9.629333 0 17.46-7.794667 17.46-17.370666V104.754667l86.88 86.553333h-0.008l30.924 30.813333c6.910667 5.421333 16.757333 4.804 23.050667-1.478666a17.365333 17.365333 0 0 0 5.128-12.354667c0-4.632-1.8-8.985333-5.076-12.253333L650.533333 175.973333l-17.956-17.882666 0.008-0.008-106.748-106.346667zM178.666667 0h666.666666v40H178.666667z"></path>
+  <path d="M525.837333 972.266667c-3.406667 3.397333-8.109333 5.126667-13.228 4.874666l-0.348-0.017333-0.34 0.017333c-5.110667 0.252-9.813333-1.477333-13.245333-4.892l-103.454667-103.053333-4.902666-4.986667-26.517334-26.425333-9.621333-9.626667c-3.789333-3.789333-5.876-8.733333-5.876-13.912 0-4.710667 1.773333-9.08 5.006667-12.313333 5.414667-5.396 13.724-6.516 20.92-2.901333l36.817333 36.677333 4.902667 4.978667 78.857333 78.550666V576.205333c0-9.576 7.822667-17.370667 17.453333-17.370666 9.629333 0 17.46 7.794667 17.46 17.370666v343.04l86.88-86.553333h-0.008l30.924-30.813333c6.910667-5.421333 16.757333-4.804 23.050667 1.478666a17.365333 17.365333 0 0 1 5.128 12.354667c0 4.632-1.8 8.985333-5.076 12.253333L650.533333 848.026667l-17.956 17.882666 0.008 0.008-106.748 106.346667zM178.666667 1024h666.666666v-40H178.666667z"></path>
+</svg>
\ No newline at end of file
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svgs/image.svg b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/image.svg
new file mode 100644
index 000000000..5728edcef
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/image.svg
@@ -0,0 +1,4 @@
+<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="1024" height="1024">
+  <path d="M736 448c53 0 96-43 96-96 0-53-43-96-96-96-53 0-96 43-96 96C640 405 683 448 736 448z"></path>
+  <path d="M904 128 120 128c-31.2 0-56 25.4-56 56.6l0 654.8c0 31.2 24.8 56.6 56 56.6l784 0c31.2 0 56-25.4 56-56.6L960 184.6C960 153.4 935.2 128 904 128zM697.8 523.4c-6-7-15.2-12.4-25.6-12.4-10.2 0-17.4 4.8-25.6 11.4l-37.4 31.6c-7.8 5.6-14 9.4-23 9.4-8.6 0-16.4-3.2-22-8.2-2-1.8-5.6-5.2-8.6-8.2L448 430.6c-8-9.2-20-15-33.4-15-13.4 0-25.8 6.6-33.6 15.6L128 736.4 128 215.4c2-13.6 12.6-23.4 26.2-23.4l715.4 0c13.8 0 25 10.2 25.8 24l0.6 520.8L697.8 523.4z"></path>
+</svg>
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svgs/inline-block.svg b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/inline-block.svg
new file mode 100644
index 000000000..aad708fa4
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/inline-block.svg
@@ -0,0 +1,5 @@
+<svg width="28" height="14" viewBox="0 0 28 14">
+  <path fill="currentColor" d="M25 3v8H3V3h22m1-1H2v10h24V2z" opacity=".15"></path>
+  <path opacity=".35" fill="currentColor" d="M8.418 9.8H7.66L7.25 11h1.58l-.232-.676-.18-.525zM3 11h.567l2.916-7.94h3.15L11 6.78V3H3v8zm15.12-1.002a3.302 3.302 0 0 1-.48-.586c-.173.343-.42.653-.73.888.002 0 .004-.002.005-.003l-.008.006.003-.003a3.145 3.145 0 0 1-1.092.55c-.4.11-.825.15-1.303.15h6.017a4.416 4.416 0 0 1-1.12-.215 3.51 3.51 0 0 1-1.292-.787zM14.237 3c.49 0 .853.014 1.167.06.335.05.656.16.953.314h.003l.004.003c.365.19.694.492.898.866.13.234.197.49.24.747.16-.298.343-.58.578-.82v-.002c.358-.366.8-.643 1.287-.826a4.373 4.373 0 0 1 1.557-.272 5.67 5.67 0 0 1 1.442.18l.01.002.01.003c.205.06.4.126.59.208.15.064.283.125.407.185l.562.274v3.016h-1.54l-.28-.24a7.018 7.018 0 0 0-.233-.188 2.703 2.703 0 0 0-.26-.175 1.594 1.594 0 0 0-.277-.125h-.006l-.2-.03a.772.772 0 0 0-.26.042l-.16.102a.63.63 0 0 0-.13.22 1.486 1.486 0 0 0-.075.516c0 .266.04.436.074.513a.59.59 0 0 0 .13.212l.15.09h.003a.868.868 0 0 0 .265.045l.236-.037h.008a1.04 1.04 0 0 0 .25-.113l.007-.004.01-.005.24-.16a6.41 6.41 0 0 0 .216-.17l.285-.254h1.536v3.017l-.59.266c-.15.066-.292.13-.422.184a4.19 4.19 0 0 1-.53.19 5.918 5.918 0 0 1-.636.15c-.076.012-.16.02-.24.026H25V3H14.237z"></path>
+  <path fill="currentColor" d="M25.8 1H2.2A1.2 1.2 0 0 0 1 2.2v9.6A1.2 1.2 0 0 0 2.2 13h23.6a1.2 1.2 0 0 0 1.2-1.2V2.2A1.2 1.2 0 0 0 25.8 1zm.2 11H2V2h24v10zm-7.186-2.72c.258.248.567.435.927.56s.76.19 1.18.19c.29 0 .51-.014.68-.042.167-.028.34-.07.53-.123.143-.04.28-.09.41-.146l.412-.19V8.16h-.154c-.07.06-.157.134-.265.22a3.337 3.337 0 0 1-.35.237 2.11 2.11 0 0 1-.485.22 1.798 1.798 0 0 1-1.1-.01 1.403 1.403 0 0 1-.523-.3c-.15-.14-.28-.33-.38-.57a2.36 2.36 0 0 1-.152-.9c0-.347.047-.64.14-.88s.216-.433.367-.58c.157-.15.33-.26.517-.325a1.786 1.786 0 0 1 1.116-.014c.164.056.316.125.457.206a4.868 4.868 0 0 1 .644.466h.17V4.54a13.03 13.03 0 0 0-.367-.168 3.667 3.667 0 0 0-1.005-.27 4.736 4.736 0 0 0-.65-.04c-.436 0-.837.07-1.205.207s-.675.333-.924.59c-.26.262-.457.58-.59.95S18 6.6 18 7.055c0 .488.07.918.213 1.29s.343.683.6.933zm-3.264.607c.272-.076.52-.2.75-.38.195-.15.35-.338.46-.567.113-.23.17-.488.17-.778 0-.4-.11-.722-.332-.967-.22-.245-.52-.406-.896-.484v-.03a1.46 1.46 0 0 0 .623-.51 1.36 1.36 0 0 0 .22-.77c0-.25-.052-.47-.16-.665a1.15 1.15 0 0 0-.49-.465 2.065 2.065 0 0 0-.64-.215A7.67 7.67 0 0 0 14.237 4H12v6h2.515c.418 0 .763-.037 1.035-.113zM13.478 5.1h.14c.29 0 .517.002.678.006s.296.027.404.07c.12.05.206.123.253.223a.69.69 0 0 1 .072.29.86.86 0 0 1-.062.34c-.042.1-.13.18-.263.24a1.05 1.05 0 0 1-.39.08c-.166.007-.366.01-.6.01h-.233V5.1zm.108 3.8h-.108V7.405h.324c.222 0 .434 0 .638.004.203 0 .363.02.48.05.17.05.29.13.36.23s.106.25.106.44c0 .144-.03.272-.087.384s-.17.2-.32.27a1.257 1.257 0 0 1-.5.104c-.18.003-.48.004-.9.004zm-6.64-.1h2.187l.41 1.2h1.574L8.935 4.06H7.182L5 10h1.535l.412-1.2zM8.04 5.58l.727 2.13H7.313l.727-2.13z"></path>
+</svg>
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svgs/inline.svg b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/inline.svg
new file mode 100644
index 000000000..f290a86c3
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/inline.svg
@@ -0,0 +1 @@
+<svg width="20" height="8" viewBox="0 0 20 8"><path fill="currentColor" d="M14.814 6.25c.258.248.567.435.927.56s.76.19 1.18.19c.29 0 .51-.014.68-.042.167-.028.34-.07.53-.123.143-.04.28-.09.41-.146l.41-.19V5.13h-.153c-.07.06-.157.134-.265.22a3.337 3.337 0 0 1-.35.237 2.11 2.11 0 0 1-.484.22 1.798 1.798 0 0 1-1.1-.01 1.403 1.403 0 0 1-.523-.3 1.566 1.566 0 0 1-.38-.57c-.1-.24-.152-.54-.152-.9 0-.346.048-.638.14-.878s.217-.437.368-.58c.16-.155.33-.26.52-.33a1.786 1.786 0 0 1 1.117-.013c.165.055.317.124.458.205a4.385 4.385 0 0 1 .643.47h.17V1.52c-.107-.05-.23-.107-.37-.168a3.613 3.613 0 0 0-1.003-.27 4.736 4.736 0 0 0-.65-.04c-.436 0-.837.07-1.205.207s-.674.33-.923.59c-.26.26-.458.58-.59.95S14 3.57 14 4.02c0 .488.07.918.213 1.29s.343.683.6.933zm-3.264.608c.272-.075.52-.2.75-.377a1.5 1.5 0 0 0 .46-.56 1.72 1.72 0 0 0 .17-.77c0-.4-.11-.72-.332-.96-.22-.244-.52-.404-.896-.48v-.04a1.46 1.46 0 0 0 .623-.516c.147-.22.22-.474.22-.763 0-.25-.052-.47-.16-.66a1.152 1.152 0 0 0-.49-.46 2.06 2.06 0 0 0-.64-.212A7.67 7.67 0 0 0 10.237 1H8v5.97h2.515c.418 0 .763-.037 1.035-.112zM9.478 2.095h.14c.29 0 .517.002.678.006.162.01.296.03.404.07a.46.46 0 0 1 .253.23.69.69 0 0 1 .072.298.85.85 0 0 1-.062.34.492.492 0 0 1-.263.24 1.052 1.052 0 0 1-.39.08c-.166.006-.366.01-.6.01h-.232v-1.27zm.108 3.78h-.108V4.388h.324c.222 0 .434 0 .638.004a1.8 1.8 0 0 1 .48.056c.17.05.29.127.36.23.07.104.106.25.106.44 0 .144-.03.272-.087.383s-.17.2-.32.27-.32.1-.5.11c-.18.004-.48.004-.9.004zm-6.64-.106h2.187l.41 1.2h1.574L4.935 1.03H3.182L1 6.97h1.535l.412-1.2zM4.04 2.55l.727 2.13H3.313l.727-2.13z"></path></svg>
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svgs/italic.svg b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/italic.svg
new file mode 100644
index 000000000..3a6da69c8
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/italic.svg
@@ -0,0 +1,3 @@
+<svg width="13" height="18" viewBox="0 0 13 18" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <path d="M12.2851562,0.78125 L12.0625,1.49609375 C12.0468749,1.50390629 12.0039066,1.51367182 11.9335938,1.52539062 C11.8632809,1.53710943 11.791016,1.54882807 11.7167969,1.56054688 C11.6425778,1.57226568 11.5976563,1.58203121 11.5820312,1.58984375 C10.824215,1.73046945 10.3281262,1.86523373 10.09375,1.99414062 C9.85937383,2.12304752 9.68359434,2.31640496 9.56640625,2.57421875 C9.3554677,3.10547141 9.05664256,3.99022818 8.66992188,5.22851562 C8.28320119,6.46680307 7.8945332,7.7636651 7.50390625,9.11914062 C7.1132793,10.4746162 6.80859484,11.5976518 6.58984375,12.4882812 C6.58203121,12.5273439 6.45312625,13.0390576 6.203125,14.0234375 C5.95312375,15.0078174 5.828125,15.5351559 5.828125,15.6054688 C5.828125,15.7226568 5.87499953,15.8203121 5.96875,15.8984375 C6.03125031,15.9531253 6.60546332,16.1054675 7.69140625,16.3554688 C7.94922004,16.402344 8.078125,16.4257812 8.078125,16.4257812 L7.8671875,17.1171875 C7.49218562,17.0937499 7.02734652,17.0703126 6.47265625,17.046875 C5.70702742,17.0156248 5.00390945,17 4.36328125,17 C3.32421355,17 2.14844406,17.0390621 0.8359375,17.1171875 L1.046875,16.4257812 C1.05468754,16.4257812 1.08203102,16.4199219 1.12890625,16.4082031 C1.17578148,16.3964843 1.23828086,16.3847657 1.31640625,16.3730469 C1.39453164,16.3613281 1.47265586,16.3476563 1.55078125,16.3320312 C2.25390977,16.1992181 2.71093645,16.0820318 2.921875,15.9804688 C3.13281355,15.8789057 3.30859305,15.7304697 3.44921875,15.5351562 C3.62890715,15.2617174 3.98827855,14.2070404 4.52734375,12.3710938 C4.55078137,12.2773433 4.69335807,11.7773483 4.95507812,10.8710938 C5.21679818,9.96483922 5.37890594,9.39843863 5.44140625,9.171875 C5.60546957,8.58593457 5.78320217,7.95898771 5.97460938,7.29101562 C6.16601658,6.62304354 6.30859328,6.10547059 6.40234375,5.73828125 C6.82422086,4.22264867 7.09374941,3.19140898 7.2109375,2.64453125 C7.2500002,2.52734316 7.26953125,2.41796926 7.26953125,2.31640625 C7.26953125,2.16015547 7.20312566,2.05468777 7.0703125,2 C6.99218711,1.9609373 6.68554955,1.87695377 6.15039062,1.74804688 C5.6152317,1.61913998 5.25000098,1.53515645 5.0546875,1.49609375 L5.2421875,0.78125 C6.50781883,0.875000469 7.65233863,0.921875 8.67578125,0.921875 C10.0820383,0.921875 11.2851513,0.875000469 12.2851562,0.78125 L12.2851562,0.78125 Z"></path>
+</svg>
\ No newline at end of file
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svgs/justify-around-v.svg b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/justify-around-v.svg
new file mode 100644
index 000000000..6e793839f
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/justify-around-v.svg
@@ -0,0 +1 @@
+<svg width="21" height="13" viewBox="0 0 21 13"><g fill="currentColor" fill-rule="evenodd"><path d="M0 2h21v1H0V2zm5.5 0h10v1h-10V2zM0 10h21v1H0v-1zm5.5 0h10v1h-10v-1z" opacity=".5"></path><path d="M6 8h9v5H6z"></path><path opacity=".4" d="M7 1h7v3H7z"></path><path d="M7 1v3h7V1H7zM6 0h9v5H6V0z"></path></g></svg>
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svgs/justify-around.svg b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/justify-around.svg
new file mode 100644
index 000000000..b6e2827bc
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/justify-around.svg
@@ -0,0 +1 @@
+<svg width="16" height="17" viewBox="0 0 16 17"><g fill="currentColor" fill-rule="evenodd"><path d="M2 0h1v17H2V0zm0 3.5h1v10H2v-10zM13 0h1v17h-1V0zm0 3.5h1v10h-1v-10z" opacity=".5"></path><path d="M11 4h5v9h-5z"></path><path opacity=".4" d="M1 5h3v7H1z"></path><path d="M1 5v7h3V5H1zM0 4h5v9H0V4z"></path></g></svg>
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svgs/justify-between-v.svg b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/justify-between-v.svg
new file mode 100644
index 000000000..b9be3569a
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/justify-between-v.svg
@@ -0,0 +1 @@
+<svg width="21" height="18" viewBox="0 0 21 18"><g fill="currentColor" fill-rule="evenodd"><path opacity=".5" d="M0 0h21v1H0zm0 17h21v1H0z"></path><path d="M6 11h9v5H6z"></path><path opacity=".4" d="M7 3h7v3H7z"></path><path d="M7 3v3h7V3H7zM6 2h9v5H6V2z"></path></g></svg>
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svgs/justify-between.svg b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/justify-between.svg
new file mode 100644
index 000000000..70008477b
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/justify-between.svg
@@ -0,0 +1 @@
+<svg width="24" height="17" viewBox="0 0 24 17"><g fill="currentColor" fill-rule="evenodd"><path opacity=".5" d="M0 0h1v17H0zm23 0h1v17h-1z"></path><path d="M17 4h5v9h-5z"></path><path opacity=".4" d="M3 5h3v7H3z"></path><path d="M3 5v7h3V5H3zM2 4h5v9H2V4z"></path></g></svg>
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svgs/justify-center-v.svg b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/justify-center-v.svg
new file mode 100644
index 000000000..e8e9c28d1
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/justify-center-v.svg
@@ -0,0 +1 @@
+<svg width="21" height="13" viewBox="0 0 21 13"><g fill="currentColor" fill-rule="evenodd"><path opacity=".5" d="M0 6h21v1H0z"></path><path d="M6 8h9v5H6z"></path><path opacity=".4" d="M7 1h7v3H7z"></path><path d="M7 1v3h7V1H7zM6 0h9v5H6V0z"></path></g></svg>
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svgs/justify-center.svg b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/justify-center.svg
new file mode 100644
index 000000000..2b799b34b
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/justify-center.svg
@@ -0,0 +1 @@
+<svg width="13" height="17" viewBox="0 0 13 17"><g fill="currentColor" fill-rule="evenodd"><path opacity=".5" d="M6 0h1v17H6z"></path><path d="M8 4h5v9H8z"></path><path opacity=".4" d="M1 5h3v7H1z"></path><path d="M1 5v7h3V5H1zM0 4h5v9H0V4z"></path></g></svg>
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svgs/justify-end-v.svg b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/justify-end-v.svg
new file mode 100644
index 000000000..783d0fad0
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/justify-end-v.svg
@@ -0,0 +1 @@
+<svg width="21" height="18" viewBox="0 0 21 18"><g fill="currentColor" fill-rule="evenodd"><path d="M6 11h9v5H6z"></path><path opacity=".4" d="M7 6h7v3H7z"></path><path d="M7 6v3h7V6H7zM6 5h9v5H6V5z"></path><path opacity=".5" d="M0 17h21v1H0z"></path></g></svg>
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svgs/justify-end.svg b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/justify-end.svg
new file mode 100644
index 000000000..e7776c6d7
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/justify-end.svg
@@ -0,0 +1 @@
+<svg width="24" height="17" viewBox="0 0 24 17"><g fill="currentColor" fill-rule="evenodd"><path opacity=".5" d="M23 0h1v17h-1z"></path><path d="M17 4h5v9h-5z"></path><path opacity=".4" d="M12 5h3v7h-3z"></path><path d="M12 5v7h3V5h-3zm-1-1h5v9h-5V4z"></path></g></svg>
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svgs/justify-start-v.svg b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/justify-start-v.svg
new file mode 100644
index 000000000..5fc50f432
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/justify-start-v.svg
@@ -0,0 +1 @@
+<svg width="21" height="18" viewBox="0 0 21 18"><g fill="currentColor" fill-rule="evenodd"><path opacity=".5" d="M0 0h21v1H0z"></path><path d="M6 8h9v5H6z"></path><path opacity=".4" d="M7 3h7v3H7z"></path><path d="M7 3v3h7V3H7zM6 2h9v5H6V2z"></path></g></svg>
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svgs/justify-start.svg b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/justify-start.svg
new file mode 100644
index 000000000..9bea7eee5
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/justify-start.svg
@@ -0,0 +1 @@
+<svg width="24" height="17" viewBox="0 0 24 17"><g fill="currentColor" fill-rule="evenodd"><path opacity=".5" d="M0 0h1v17H0z"></path><path d="M8 4h5v9H8z"></path><path opacity=".4" d="M3 5h3v7H3z"></path><path d="M3 5v7h3V5H3zM2 4h5v9H2V4z"></path></g></svg>
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svgs/layer.svg b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/layer.svg
new file mode 100644
index 000000000..cfa47376c
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/layer.svg
@@ -0,0 +1,3 @@
+<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="200" height="200">
+  <path d="M512.28 881.25 124.847 579.972l-85.104 66.192 472.799 367.732 472.799-367.732-85.629-66.454C899.712 579.71 512.28 881.25 512.28 881.25zM512.542 747.816 899.45 447.063l85.892-66.98L512.542 12.351 39.743 380.083l85.629 66.454L512.542 747.816z" fill="#ffffff"></path>
+</svg>
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svgs/letter-spacing.svg b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/letter-spacing.svg
new file mode 100644
index 000000000..27f91a31b
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/letter-spacing.svg
@@ -0,0 +1,4 @@
+<svg width="42" height="33" viewBox="0 0 42 33" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <path d="M16,21.86 L16,22 L18,22 L18,0 L16,0 L16,20.6992542 C15.1019614,20.6856486 14.588633,20.485899 14.46,20.1 L9.64,7 L6.74,7 L1.74,20.12 C1.673333,20.3066676 1.506668,20.4466662 1.24,20.54 C0.973332,20.6333338 0.5600028,20.68 0,20.68 L0,21.86 L5.46,21.86 L5.46,20.7 L4.22,20.7 C3.6333304,20.7 3.34,20.5266684 3.34,20.18 C3.34,20.0999996 3.3533332,20.0200004 3.38,19.94 L4.12,17.94 L10.26,17.94 L11.06,20.1 C11.1000002,20.2066672 11.12,20.2799998 11.12,20.32 C11.12,20.5733346 10.9266686,20.7 10.54,20.7 L8.78,20.7 L8.78,21.86 L16,21.86 Z M26,20.6037894 L26,0 L24,0 L24,22 L26,22 L26,21.86 L30.46,21.86 L30.46,20.7 L29.22,20.7 C28.6333304,20.7 28.34,20.5266684 28.34,20.18 C28.34,20.0999996 28.3533332,20.0200004 28.38,19.94 L29.12,17.94 L35.26,17.94 L36.06,20.1 C36.1000002,20.2066672 36.12,20.2799998 36.12,20.32 C36.12,20.5733346 35.9266686,20.7 35.54,20.7 L33.78,20.7 L33.78,21.86 L41.1,21.86 L41.1,20.7 C40.1399952,20.7 39.593334,20.500002 39.46,20.1 L34.64,7 L31.74,7 L26.74,20.12 C26.673333,20.3066676 26.506668,20.4466662 26.24,20.54 C26.1700821,20.5644712 26.0900822,20.5857344 26,20.6037894 Z M17.9759154,30 L17.9759154,33 L11,29 L17.9759154,25 L17.9759154,28 L24,28 L24,30 L17.9759154,30 Z M30.9759154,29 L24,33 L24,25 L30.9759154,29 Z M16,21.86 L16,20.6992542 C16.0328195,20.6997514 16.0661528,20.7 16.1,20.7 L16.1,21.86 L16,21.86 Z M30,16.04 L35.12,16.04 L32.58,9 L30,16.04 Z M5,16.04 L10.12,16.04 L7.58,9 L5,16.04 Z"></path>
+    <rect opacity="0.5" x="18" y="0" width="6" height="22"></rect>
+</svg>
\ No newline at end of file
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svgs/line-height.svg b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/line-height.svg
new file mode 100644
index 000000000..139aa1a74
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/line-height.svg
@@ -0,0 +1,3 @@
+<svg width="29" height="34" viewBox="0 0 29 34" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <path d="M5,27.8833008 L5,20 L3,20 L3,27.8833008 L0.457763672,27.8833008 L3.96508789,34 L7.47241211,27.8833008 L5,27.8833008 Z M9,14 L29,14 L29,16 L9,16 L9,14 Z M9,32 L29,32 L29,34 L9,34 L9,32 Z M3.96508789,13.8833008 L7.47241211,20 L0.457763672,20 L3.96508789,13.8833008 Z M21.015625,10.6054688 C20.2421836,11.1367214 19.5332063,11.5292956 18.8886719,11.7832031 C18.2441374,12.0371106 17.6406278,12.1640625 17.078125,12.1640625 C16.1484329,12.1640625 15.4042997,11.8828153 14.8457031,11.3203125 C14.2871066,10.7578097 14.0078125,10.0156296 14.0078125,9.09375 C14.0078125,8.07030738 14.4277302,7.26562793 15.2675781,6.6796875 C16.1074261,6.09374707 18.0234225,5.44140984 21.015625,4.72265625 L21.015625,3.9609375 C21.015625,2.95311996 20.8515641,2.2539082 20.5234375,1.86328125 C20.1953109,1.4726543 19.6250041,1.27734375 18.8125,1.27734375 C18.507811,1.27734375 18.2070327,1.30859344 17.9101562,1.37109375 C17.6132798,1.43359406 17.3046891,1.52734313 16.984375,1.65234375 L16.984375,3.66796875 L15.3320312,3.66796875 C15.0429673,3.66796875 14.8457037,3.6152349 14.7402344,3.50976563 C14.6347651,3.40429635 14.5820312,3.21093891 14.5820312,2.9296875 C14.5820312,2.14843359 15.0331986,1.50000258 15.9355469,0.984375 C16.8378951,0.468747422 18.0038991,0.2109375 19.4335938,0.2109375 C20.6914125,0.2109375 21.6054659,0.484372266 22.1757812,1.03125 C22.7460966,1.57812773 23.03125,2.4570252 23.03125,3.66796875 L23.03125,10.6289062 L23.4414062,11.015625 L24.7070312,11.1328125 L24.7070312,12 L21.3320312,12 L21.015625,10.6054688 Z M21.015625,9.796875 L21.015625,5.56640625 C19.0078025,6.12109652 17.6894563,6.62890395 17.0605469,7.08984375 C16.4316375,7.55078355 16.1171875,8.15624625 16.1171875,8.90625 C16.1171875,9.50781551 16.2910139,9.98632635 16.6386719,10.3417969 C16.9863299,10.6972674 17.4531221,10.875 18.0390625,10.875 C18.4140644,10.875 18.8457007,10.7851571 19.3339844,10.6054688 C19.8222681,10.4257804 20.3828093,10.1562518 21.015625,9.796875 Z M21.015625,28.6054688 C20.2421836,29.1367214 19.5332063,29.5292956 18.8886719,29.7832031 C18.2441374,30.0371106 17.6406278,30.1640625 17.078125,30.1640625 C16.1484329,30.1640625 15.4042997,29.8828153 14.8457031,29.3203125 C14.2871066,28.7578097 14.0078125,28.0156296 14.0078125,27.09375 C14.0078125,26.0703074 14.4277302,25.2656279 15.2675781,24.6796875 C16.1074261,24.0937471 18.0234225,23.4414098 21.015625,22.7226562 L21.015625,21.9609375 C21.015625,20.95312 20.8515641,20.2539082 20.5234375,19.8632812 C20.1953109,19.4726543 19.6250041,19.2773438 18.8125,19.2773438 C18.507811,19.2773438 18.2070327,19.3085934 17.9101562,19.3710938 C17.6132798,19.4335941 17.3046891,19.5273431 16.984375,19.6523438 L16.984375,21.6679688 L15.3320312,21.6679688 C15.0429673,21.6679688 14.8457037,21.6152349 14.7402344,21.5097656 C14.6347651,21.4042963 14.5820312,21.2109389 14.5820312,20.9296875 C14.5820312,20.1484336 15.0331986,19.5000026 15.9355469,18.984375 C16.8378951,18.4687474 18.0038991,18.2109375 19.4335938,18.2109375 C20.6914125,18.2109375 21.6054659,18.4843723 22.1757812,19.03125 C22.7460966,19.5781277 23.03125,20.4570252 23.03125,21.6679688 L23.03125,28.6289062 L23.4414062,29.015625 L24.7070312,29.1328125 L24.7070312,30 L21.3320312,30 L21.015625,28.6054688 Z M21.015625,27.796875 L21.015625,23.5664062 C19.0078025,24.1210965 17.6894563,24.6289039 17.0605469,25.0898438 C16.4316375,25.5507836 16.1171875,26.1562462 16.1171875,26.90625 C16.1171875,27.5078155 16.2910139,27.9863263 16.6386719,28.3417969 C16.9863299,28.6972674 17.4531221,28.875 18.0390625,28.875 C18.4140644,28.875 18.8457007,28.7851571 19.3339844,28.6054688 C19.8222681,28.4257804 20.3828093,28.1562518 21.015625,27.796875 Z"></path>
+</svg>
\ No newline at end of file
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svgs/line-through.svg b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/line-through.svg
new file mode 100644
index 000000000..87f3bec5f
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/line-through.svg
@@ -0,0 +1,3 @@
+<svg width="21" height="26" viewBox="0 0 21 26" version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <path d="M12.656,12 L12.656,2.212 L15.176,2.212 C15.8106698,2.212 16.361331,2.30999902 16.828,2.506 C17.294669,2.70200098 17.6913317,3.04733086 18.018,3.542 C18.3446683,4.03666914 18.133333,4.40132708 18.208,5.652 L20.972,5.568 L20.972,0 L0,0 L0,5.568 L2.764,5.652 C2.83866704,4.40132708 2.6273317,4.03666914 2.954,3.542 C3.2806683,3.04733086 3.677331,2.70200098 4.144,2.506 C4.610669,2.30999902 5.16133016,2.212 5.796,2.212 L8.344,2.212 L8.344,12 L0,12 L0,14 L8.344,14 L8.344,22.892 C8.344,23.750671 7.51334164,24.18 5.852,24.18 L5.852,25.804 L15.176,25.804 L15.176,24.18 C13.4959916,24.18 12.656,23.750671 12.656,22.892 L12.656,14 L21,14 L21,12 L12.656,12 Z"></path>
+</svg>
\ No newline at end of file
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svgs/lowercase.svg b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/lowercase.svg
new file mode 100644
index 000000000..e7e5b5979
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/lowercase.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="17" viewBox="0 0 20 17" version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <path d="M5.64705882,3.95798319 L9,3.95798319 L8.87394958,5.77310924 C8.40335899,5.6722684 7.90336399,5.60084055 7.37394958,5.55882353 C6.84453517,5.51680651 6.26891067,5.49579832 5.64705882,5.49579832 L5.64705882,14.2941176 C5.64705882,15.0504239 6.01680303,15.4285714 6.75630252,15.4285714 C7.14285908,15.4285714 7.40756231,15.3235305 7.55042017,15.1134454 C7.69327803,14.9033603 7.76470588,14.6302538 7.76470588,14.2941176 L7.76470588,12.8319328 L9,12.8319328 L9,13.9411765 C9,14.3949603 8.95378197,14.8067208 8.86134454,15.1764706 C8.7689071,15.5462203 8.60084155,15.8613432 8.35714286,16.1218487 C8.11344416,16.3823542 7.78991798,16.5882345 7.38655462,16.7394958 C6.98319126,16.8907571 6.47059134,16.9663866 5.8487395,16.9663866 C4.53780857,16.9663866 3.60084315,16.6722718 3.03781513,16.0840336 C2.4747871,15.4957954 2.19327731,14.6722742 2.19327731,13.6134454 L2.19327731,5.49579832 L0,5.49579832 L0,4.28571429 C0.470590588,4.25210067 0.911762647,4.18487445 1.32352941,4.08403361 C1.73529618,3.98319277 2.0966371,3.80672395 2.40756303,3.55462185 C2.71848895,3.30251975 2.96218399,2.9495821 3.13865546,2.49579832 C3.31512693,2.04201454 3.40336134,1.45378513 3.40336134,0.731092437 L3.40336134,0.176470588 L5.64705882,0 L5.64705882,3.95798319 Z M16.6470588,3.95798319 L20,3.95798319 L19.8739496,5.77310924 C19.403359,5.6722684 18.903364,5.60084055 18.3739496,5.55882353 C17.8445352,5.51680651 17.2689107,5.49579832 16.6470588,5.49579832 L16.6470588,14.2941176 C16.6470588,15.0504239 17.016803,15.4285714 17.7563025,15.4285714 C18.1428591,15.4285714 18.4075623,15.3235305 18.5504202,15.1134454 C18.693278,14.9033603 18.7647059,14.6302538 18.7647059,14.2941176 L18.7647059,12.8319328 L20,12.8319328 L20,13.9411765 C20,14.3949603 19.953782,14.8067208 19.8613445,15.1764706 C19.7689071,15.5462203 19.6008416,15.8613432 19.3571429,16.1218487 C19.1134442,16.3823542 18.789918,16.5882345 18.3865546,16.7394958 C17.9831913,16.8907571 17.4705913,16.9663866 16.8487395,16.9663866 C15.5378086,16.9663866 14.6008432,16.6722718 14.0378151,16.0840336 C13.4747871,15.4957954 13.1932773,14.6722742 13.1932773,13.6134454 L13.1932773,5.49579832 L11,5.49579832 L11,4.28571429 C11.4705906,4.25210067 11.9117626,4.18487445 12.3235294,4.08403361 C12.7352962,3.98319277 13.0966371,3.80672395 13.407563,3.55462185 C13.7184889,3.30251975 13.962184,2.9495821 14.1386555,2.49579832 C14.3151269,2.04201454 14.4033613,1.45378513 14.4033613,0.731092437 L14.4033613,0.176470588 L16.6470588,0 L16.6470588,3.95798319 Z"></path>
+</svg>
\ No newline at end of file
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svgs/no.svg b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/no.svg
new file mode 100644
index 000000000..d488a3b6b
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/no.svg
@@ -0,0 +1,3 @@
+<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="200" height="200">
+  <path d="M571.733333 512l238.933333 238.933333L750.933333 810.666667 512 571.733333 273.066667 810.666667 213.333333 750.933333l238.933333-238.933333L213.333333 273.066667 273.066667 213.333333l238.933333 238.933333L750.933333 213.333333 810.666667 273.066667 571.733333 512z"></path>
+</svg>
\ No newline at end of file
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svgs/none.svg b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/none.svg
new file mode 100644
index 000000000..8c01b9fe4
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/none.svg
@@ -0,0 +1,4 @@
+<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="1024" height="1024">
+  <path d="M461.952 746.432l-258.56 0 0-99.776 258.56 0L461.952 746.432z"></path>
+  <path d="M853.056 746.432l-258.56 0 0-99.776 258.56 0L853.056 746.432z"></path>
+</svg>
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svgs/normal.svg b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/normal.svg
new file mode 100644
index 000000000..f533ecad2
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/normal.svg
@@ -0,0 +1,3 @@
+<svg width="9" height="18" viewBox="0 0 9 18" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <path d="M8.203125,0.5 L8.203125,1.19140625 C7.92968613,1.25390656 7.72656316,1.29687488 7.59375,1.3203125 C6.5546823,1.5000009 5.95312582,1.66992107 5.7890625,1.83007812 C5.62499918,1.99023518 5.54296875,2.34765348 5.54296875,2.90234375 L5.54296875,3.3125 L5.49609375,8.0234375 L5.53125,14.8671875 C5.53125,15.4140652 5.61132732,15.761718 5.77148438,15.9101562 C5.93164143,16.0585945 6.48046406,16.1874995 7.41796875,16.296875 C7.59765715,16.3203126 7.85937328,16.3671871 8.203125,16.4375 L8.203125,17.1289062 C6.94530621,17.0429683 5.73438082,17 4.5703125,17 C3.36718148,17 2.04688219,17.0429683 0.609375,17.1289062 L0.609375,16.4375 C0.835938633,16.3749997 1.00781191,16.3359376 1.125,16.3203125 C2.23438055,16.1406241 2.86913982,15.9746101 3.02929688,15.8222656 C3.18945393,15.6699211 3.26953125,15.2851593 3.26953125,14.6679688 L3.2578125,14.0820312 L3.28125,9.78125 C3.28125,5.35935289 3.27343758,2.91406484 3.2578125,2.4453125 C3.24218742,2.18749871 3.15820389,1.98828195 3.00585938,1.84765625 C2.85351486,1.70703055 2.26172391,1.53906348 1.23046875,1.34375 C1.08984305,1.31249984 0.882813867,1.2617191 0.609375,1.19140625 L0.609375,0.5 C2.30469598,0.58593793 3.62890148,0.62890625 4.58203125,0.62890625 C5.64453656,0.62890625 6.85155574,0.58593793 8.203125,0.5 L8.203125,0.5 Z"></path>
+</svg>
\ No newline at end of file
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svgs/offset.svg b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/offset.svg
new file mode 100644
index 000000000..ce3b82d17
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/offset.svg
@@ -0,0 +1,3 @@
+<svg viewBox="0 0 1150 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="1150" height="1024">
+  <path d="M576.764851 1023.958097c-10.039798 0.437213-18.18347-2.558848-24.127269-8.472734l-179.149291-178.454351-8.491142-8.636113-45.9189-45.757821-16.660127-16.671633c-6.562801-6.562801-10.175564-15.122977-10.175563-24.092752 0-8.152877 3.069697-15.721269 8.670629-21.3199 9.377074-9.342557 23.763692-11.284705 36.226572-5.025652l63.7549 63.513282 8.491142 8.622306 136.553212 136.023954V149.572963h60.459693v774.127527l150.44739-149.881314 53.537916-53.356127c11.965837-9.38858 29.017155-8.32316 39.91297 2.556547a30.071069 30.071069 0 0 1 8.882333 21.395837 29.753514 29.753514 0 0 1-8.790288 21.21635l-34.783768 34.742347-31.095068 30.968507-184.837666 184.172641c-5.900078 5.88397-14.043751 8.877731-22.907675 8.442819zM0 0h1150.561255v69.033675H0z"></path>
+</svg>
\ No newline at end of file
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svgs/opacity.svg b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/opacity.svg
new file mode 100644
index 000000000..a6c6e7692
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/opacity.svg
@@ -0,0 +1,4 @@
+<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="200" height="200">
+  <path d="M256 598.016l512 0q0-109.994667-75.989333-185.984l-180.010667-187.989333-180.010667 185.984q-75.989333 75.989333-75.989333 187.989333zM754.005333 342.016q100.010667 100.010667 100.010667 240 0 141.994667-100.010667 242.005333t-242.005333 100.010667-242.005333-100.010667-100.010667-242.005333q0-139.989333 100.010667-240l242.005333-242.005333z" fill="#ffffff">
+  </path>
+</svg>
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svgs/repeat-a.svg b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/repeat-a.svg
new file mode 100644
index 000000000..4eda82024
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/repeat-a.svg
@@ -0,0 +1,3 @@
+<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="1024" height="1024">
+  <path d="M658.285714 658.285714 658.285714 877.714286 877.714286 877.714286 877.714286 658.285714 658.285714 658.285714ZM365.714286 658.285714 365.714286 877.714286 585.142857 877.714286 585.142857 658.285714 365.714286 658.285714ZM73.142857 658.285714 73.142857 877.714286 292.571429 877.714286 292.571429 658.285714 73.142857 658.285714ZM658.285714 365.714286 658.285714 585.142857 877.714286 585.142857 877.714286 365.714286 658.285714 365.714286ZM365.714286 365.714286 365.714286 585.142857 585.142857 585.142857 585.142857 365.714286 365.714286 365.714286ZM73.142857 365.714286 73.142857 585.142857 292.571429 585.142857 292.571429 365.714286 73.142857 365.714286ZM658.285714 73.142857 658.285714 292.571429 877.714286 292.571429 877.714286 73.142857 658.285714 73.142857ZM365.714286 73.142857 365.714286 292.571429 585.142857 292.571429 585.142857 73.142857 365.714286 73.142857ZM73.142857 73.142857 73.142857 292.571429 292.571429 292.571429 292.571429 73.142857 73.142857 73.142857Z"></path>
+</svg>
\ No newline at end of file
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svgs/repeat-x.svg b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/repeat-x.svg
new file mode 100644
index 000000000..1b96295e7
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/repeat-x.svg
@@ -0,0 +1,3 @@
+<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="1024" height="1024">
+  <path d="M658.285714 658.285714 877.714286 658.285714 877.714286 438.857143 658.285714 438.857143 658.285714 658.285714ZM365.714286 658.285714 585.142857 658.285714 585.142857 438.857143 365.714286 438.857143 365.714286 658.285714ZM73.142857 658.285714 292.571429 658.285714 292.571429 438.857143 73.142857 438.857143 73.142857 658.285714Z"></path>
+</svg>
\ No newline at end of file
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svgs/repeat-y.svg b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/repeat-y.svg
new file mode 100644
index 000000000..5952519a6
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/repeat-y.svg
@@ -0,0 +1,3 @@
+<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="1024" height="1024">
+  <path d="M365.714286 658.285714 365.714286 877.714286 585.142857 877.714286 585.142857 658.285714 365.714286 658.285714ZM365.714286 365.714286 365.714286 585.142857 585.142857 585.142857 585.142857 365.714286 365.714286 365.714286ZM365.714286 73.142857 365.714286 292.571429 585.142857 292.571429 585.142857 73.142857 365.714286 73.142857Z"></path>
+</svg>
\ No newline at end of file
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svgs/repeat.svg b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/repeat.svg
new file mode 100644
index 000000000..b10135106
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/repeat.svg
@@ -0,0 +1,3 @@
+<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="1024" height="1024">
+  <path d="M0 658.285714h292.571429V365.714286H0v292.571428z m365.714286-365.714285h292.571428V0H365.714286v292.571429zM0 292.571429h292.571429V0H0v292.571429zM292.571429 879.013303L147.698834 1024 0 879.013303h115.644709V731.428571h61.282011v147.584732zM879.013303 292.571429L1024 147.698834 879.013303 0v115.644709H731.428571v61.282011h147.584732z"></path>
+</svg>
\ No newline at end of file
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svgs/text-align-center.svg b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/text-align-center.svg
new file mode 100644
index 000000000..7a283f0ba
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/text-align-center.svg
@@ -0,0 +1,3 @@
+<svg width="26" height="22" viewBox="0 0 26 22" version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <path d="M0,0 L26,0 L26,2 L0,2 L0,0 Z M2,8 L24,8 L24,10 L2,10 L2,8 Z M4,16 L22,16 L22,18 L4,18 L4,16 Z M4,4 L22,4 L22,6 L4,6 L4,4 Z M0,12 L26,12 L26,14 L0,14 L0,12 Z M2,20 L24,20 L24,22 L2,22 L2,20 Z"></path>
+</svg>
\ No newline at end of file
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svgs/text-align-justify.svg b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/text-align-justify.svg
new file mode 100644
index 000000000..c1391e042
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/text-align-justify.svg
@@ -0,0 +1,3 @@
+<svg width="22" height="22" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <path d="M0,0 L22,0 L22,2 L0,2 L0,0 Z M0,8 L22,8 L22,10 L0,10 L0,8 Z M0,16 L22,16 L22,18 L0,18 L0,16 Z M0,4 L22,4 L22,6 L0,6 L0,4 Z M0,12 L22,12 L22,14 L0,14 L0,12 Z M0,20 L12,20 L12,22 L0,22 L0,20 Z"></path>
+</svg>
\ No newline at end of file
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svgs/text-align-left.svg b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/text-align-left.svg
new file mode 100644
index 000000000..d77d0c5b1
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/text-align-left.svg
@@ -0,0 +1,4 @@
+<svg width="22" height="22" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <path d="M0,0 L22,0 L22,2 L0,2 L0,0 Z M0,8 L22,8 L22,10 L0,10 L0,8 Z M0,16 L22,16 L22,18 L0,18 L0,16 Z M0,4 L18,4 L18,6 L0,6 L0,4 Z M0,12 L20,12 L20,14 L0,14 L0,12 Z M0,20 L14,20 L14,22 L0,22 L0,20 Z"></path>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svgs/text-align.svg b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/text-align.svg
new file mode 100644
index 000000000..952fffa41
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/text-align.svg
@@ -0,0 +1,3 @@
+<svg width="32" height="30" viewBox="0 0 32 30" version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <path d="M0,0 L2,0 L2,30 L0,30 L0,0 Z M4,2 L30,2 L30,4 L4,4 L4,2 Z M4,10 L32,10 L32,12 L4,12 L4,10 Z M4,18 L24,18 L24,20 L4,20 L4,18 Z M10,26 L14,26 L14,28 L10,28 L10,26 Z M4,6 L28,6 L28,8 L4,8 L4,6 Z M4,14 L28,14 L28,16 L4,16 L4,14 Z M3.93811035,27 L10,24 L10,30 L3.93811035,27 Z"></path>
+</svg>
\ No newline at end of file
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svgs/text-decoration.svg b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/text-decoration.svg
new file mode 100644
index 000000000..8bb597ec4
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/text-decoration.svg
@@ -0,0 +1,4 @@
+<svg width="18" height="16" viewBox="0 0 18 16" version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <path d="M11.176,10.176 L5.824,10.176 L4.288,14.04 C4.2079996,14.232001 4.168,14.3919994 4.168,14.52 C4.168,14.8560017 4.65599512,15.0959993 5.632,15.24 C5.74400056,15.2560001 5.8199998,15.2999996 5.86,15.372 C5.9000002,15.4440004 5.92,15.5279995 5.92,15.624 C5.92,15.7200005 5.90400016,15.8479992 5.872,16.008 C5.43999784,15.9759998 4.9840024,15.9480001 4.504,15.924 C4.0239976,15.8999999 3.55200232,15.888 3.088,15.888 C2.7679984,15.888 2.44000168,15.8959999 2.104,15.912 C1.76799832,15.9280001 1.41600184,15.9599998 1.048,16.008 C1.01599984,15.8799994 1,15.7520006 1,15.624 C1,15.5119994 1.0199998,15.4160004 1.06,15.336 C1.1000002,15.2559996 1.18399936,15.2080001 1.312,15.192 C1.80800248,15.1119996 2.17999876,15.0120006 2.428,14.892 C2.67600124,14.7719994 2.85599944,14.5840013 2.968,14.328 L8.752,0.408 C8.86400056,0.13599864 9.01599904,0 9.208,0 C9.27200032,0 9.36799936,0.01599984 9.496,0.048 L15.304,14.4 C15.4000005,14.6240011 15.6159983,14.7999994 15.952,14.928 C16.2880017,15.0560006 16.6159984,15.1439998 16.936,15.192 C17.0320005,15.2240002 17.1079997,15.2679997 17.164,15.324 C17.2200003,15.3800003 17.248,15.4799993 17.248,15.624 C17.248,15.7200005 17.2320002,15.8479992 17.2,16.008 C16.6879974,15.9759998 16.1840025,15.9480001 15.688,15.924 C15.1919975,15.8999999 14.7280022,15.888 14.296,15.888 C13.8479978,15.888 13.3360029,15.8999999 12.76,15.924 C12.1839971,15.9480001 11.6640023,15.9759998 11.2,16.008 C11.1679998,15.8479992 11.152,15.7200005 11.152,15.624 C11.152,15.4799993 11.1799997,15.3800003 11.236,15.324 C11.2920003,15.2679997 11.3439998,15.24 11.392,15.24 C11.8080021,15.1599996 12.1439987,15.0680005 12.4,14.964 C12.6560013,14.8599995 12.784,14.704001 12.784,14.496 C12.784,14.3999995 12.7520003,14.2800007 12.688,14.136 L11.176,10.176 Z M10.792,9.192 L8.56,3.312 L6.232,9.192 L10.792,9.192 Z"></path>
+  <rect x="0" y="9" width="18" height="2"></rect>
+</svg>
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svgs/text-indent.svg b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/text-indent.svg
new file mode 100644
index 000000000..07dabc2fa
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/text-indent.svg
@@ -0,0 +1,3 @@
+<svg viewBox="0 0 1450 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="1450" height="1024">
+  <path d="M253.354667 255.573333H0v-85.333333h253.354667V0L554.666667 191.786667 253.354667 383.573333v-128zM1450.666667 340.906667H682.666667v-170.666667h768v170.666667z m0 170.666666H426.666667v-85.333333h1024v85.333333z m0 170.666667H426.666667v-85.333333h1024v85.333333z m0 170.666667H426.666667v-85.333334h1024v85.333334z m-256 170.666666H426.666667v-85.333333h768v85.333333z"></path>
+</svg>
\ No newline at end of file
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svgs/text-transform.svg b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/text-transform.svg
new file mode 100644
index 000000000..6270e6ce0
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/text-transform.svg
@@ -0,0 +1,3 @@
+<svg width="40" height="18" viewBox="0 0 40 18" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <path d="M37.9692353,15.72 C38.1257067,16.2000024 38.7672297,16.44 39.8938235,16.44 L39.8938235,17.832 L31.3035882,17.832 L31.3035882,16.44 L33.369,16.44 C33.822767,16.44 34.0496471,16.2880015 34.0496471,15.984 C34.0496471,15.9359998 34.0261767,15.8480006 33.9792353,15.72 L33.0404118,13.128 L25.8349412,13.128 L24.9665294,15.528 C24.9352351,15.6240005 24.9195882,15.7199995 24.9195882,15.816 C24.9195882,16.2320021 25.2638201,16.44 25.9522941,16.44 L27.4074706,16.44 L27.4074706,17.832 L21,17.832 L21,16.416 C21.6571798,16.416 22.1422337,16.3600006 22.4551765,16.248 C22.7681192,16.1359994 22.9637055,15.9680011 23.0419412,15.744 L28.9095882,0 L32.3128235,0 L37.9692353,15.72 Z M26.8676471,10.848 L32.8761176,10.848 L29.8953529,2.4 L26.8676471,10.848 Z M16.9692353,15.72 C17.1257067,16.2000024 17.7672297,16.44 18.8938235,16.44 L18.8938235,17.832 L10.3035882,17.832 L10.3035882,16.44 L12.369,16.44 C12.822767,16.44 13.0496471,16.2880015 13.0496471,15.984 C13.0496471,15.9359998 13.0261767,15.8480006 12.9792353,15.72 L12.0404118,13.128 L4.83494118,13.128 L3.96652941,15.528 C3.93523514,15.6240005 3.91958824,15.7199995 3.91958824,15.816 C3.91958824,16.2320021 4.26382009,16.44 4.95229412,16.44 L6.40747059,16.44 L6.40747059,17.832 L0,17.832 L0,16.416 C0.657179756,16.416 1.14223373,16.3600006 1.45517647,16.248 C1.76811921,16.1359994 1.96370549,15.9680011 2.04194118,15.744 L7.90958824,0 L11.3128235,0 L16.9692353,15.72 Z M5.86764706,10.848 L11.8761176,10.848 L8.89535294,2.4 L5.86764706,10.848 Z"></path>
+</svg>
\ No newline at end of file
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svgs/underline.svg b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/underline.svg
new file mode 100644
index 000000000..3f420d41b
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/underline.svg
@@ -0,0 +1,3 @@
+<svg width="21" height="26" viewBox="0 0 21 26" version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <path d="M20.972,5.568 L18.208,5.652 C18.133333,4.40132708 18.3446683,4.03666914 18.018,3.542 C17.6913317,3.04733086 17.294669,2.70200098 16.828,2.506 C16.361331,2.30999902 15.8106698,2.212 15.176,2.212 L12.656,2.212 L12.656,18.892 C12.656,19.750671 13.4959916,20.18 15.176,20.18 L15.176,21.804 L5.852,21.804 L5.852,20.18 C7.51334164,20.18 8.344,19.750671 8.344,18.892 L8.344,2.212 L5.796,2.212 C5.16133016,2.212 4.610669,2.30999902 4.144,2.506 C3.677331,2.70200098 3.2806683,3.04733086 2.954,3.542 C2.6273317,4.03666914 2.83866704,4.40132708 2.764,5.652 L0,5.568 L0,0 L20.972,0 L20.972,5.568 Z M0,24 L21,24 L21,26 L0,26 L0,24 Z"></path>
+</svg>
\ No newline at end of file
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svgs/uppercase.svg b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/uppercase.svg
new file mode 100644
index 000000000..2cad44550
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/uppercase.svg
@@ -0,0 +1,3 @@
+<svg width="30" height="17" viewBox="0 0 30 17" version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <path d="M14,4.34122179 L12.1548732,4.40671436 C12.1050287,3.43159789 12.246107,3.14728377 12.0280374,2.76160338 C11.8099678,2.37592298 11.5451729,2.10667844 11.2336449,1.95386168 C10.9221168,1.80104492 10.5545193,1.72463768 10.1308411,1.72463768 L8.44859813,1.72463768 L8.44859813,14.7295909 C8.44859813,15.3990739 9.00934019,15.7338103 10.1308411,15.7338103 L10.1308411,17 L3.90654206,17 L3.90654206,15.7338103 C5.01558187,15.7338103 5.57009346,15.3990739 5.57009346,14.7295909 L5.57009346,1.72463768 L3.86915888,1.72463768 C3.44548075,1.72463768 3.07788318,1.80104492 2.76635514,1.95386168 C2.4548271,2.10667844 2.19003224,2.37592298 1.97196262,2.76160338 C1.75389299,3.14728377 1.89497132,3.43159789 1.84512684,4.40671436 L0,4.34122179 L0,0 L14,0 L14,4.34122179 Z M30,4.34122179 L28.1548732,4.40671436 C28.1050287,3.43159789 28.246107,3.14728377 28.0280374,2.76160338 C27.8099678,2.37592298 27.5451729,2.10667844 27.2336449,1.95386168 C26.9221168,1.80104492 26.5545193,1.72463768 26.1308411,1.72463768 L24.4485981,1.72463768 L24.4485981,14.7295909 C24.4485981,15.3990739 25.0093402,15.7338103 26.1308411,15.7338103 L26.1308411,17 L19.9065421,17 L19.9065421,15.7338103 C21.0155819,15.7338103 21.5700935,15.3990739 21.5700935,14.7295909 L21.5700935,1.72463768 L19.8691589,1.72463768 C19.4454807,1.72463768 19.0778832,1.80104492 18.7663551,1.95386168 C18.4548271,2.10667844 18.1900322,2.37592298 17.9719626,2.76160338 C17.753893,3.14728377 17.8949713,3.43159789 17.8451268,4.40671436 L16,4.34122179 L16,0 L30,0 L30,4.34122179 Z"></path>
+</svg>
\ No newline at end of file
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svgs/wrap-around-v.svg b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/wrap-around-v.svg
new file mode 100644
index 000000000..b91bdedef
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/wrap-around-v.svg
@@ -0,0 +1 @@
+<svg width="16" height="17" viewBox="0 0 16 17"><g fill="currentColor" fill-rule="evenodd"><path d="M11 3h5v5h-5zm0 6h5v5h-5z"></path><path opacity=".4" d="M1 4h3v3H1z"></path><path d="M1 4v3h3V4H1zM0 3h5v5H0V3z"></path><path opacity=".4" d="M1 10h3v3H1z"></path><path d="M1 10v3h3v-3H1zM0 9h5v5H0V9z"></path><path d="M2 0h1v17H2V0zm0 8.5h1v6H2v-6zm0-6h1v6H2v-6zM13 0h1v17h-1V0zm0 8.5h1v6h-1v-6zm0-6h1v6h-1v-6z" opacity=".5"></path></g></svg>
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svgs/wrap-around.svg b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/wrap-around.svg
new file mode 100644
index 000000000..24f053f7c
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/wrap-around.svg
@@ -0,0 +1 @@
+<svg width="21" height="13" viewBox="0 0 21 13"><g fill="currentColor" fill-rule="evenodd"><path d="M0 2h21v1H0V2zm4.5 0h12v1h-12V2zM0 10h21v1H0v-1zm4.5 0h12v1h-12v-1z" opacity=".5"></path><path d="M11 8h5v5h-5zM5 8h5v5H5z"></path><path opacity=".4" d="M12 1h3v3h-3z"></path><path d="M12 1v3h3V1h-3zm-1-1h5v5h-5V0z"></path><path opacity=".4" d="M6 1h3v3H6z"></path><path d="M6 1v3h3V1H6zM5 0h5v5H5V0z"></path></g></svg>
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svgs/wrap-between-v.svg b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/wrap-between-v.svg
new file mode 100644
index 000000000..7a96aec33
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/wrap-between-v.svg
@@ -0,0 +1 @@
+<svg width="24" height="17" viewBox="0 0 24 17"><g fill="currentColor" fill-rule="evenodd"><path opacity=".5" d="M0 0h1v17H0zm23 0h1v17h-1z"></path><path d="M17 3h5v5h-5zm0 6h5v5h-5z"></path><path opacity=".4" d="M3 4h3v3H3z"></path><path d="M3 4v3h3V4H3zM2 3h5v5H2V3z"></path><path opacity=".4" d="M3 10h3v3H3z"></path><path d="M3 10v3h3v-3H3zM2 9h5v5H2V9z"></path></g></svg>
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svgs/wrap-between.svg b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/wrap-between.svg
new file mode 100644
index 000000000..e51d2dbbe
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/wrap-between.svg
@@ -0,0 +1 @@
+<svg width="21" height="18" viewBox="0 0 21 18"><g fill="currentColor" fill-rule="evenodd"><path d="M11 11h5v5h-5zm-6 0h5v5H5z"></path><path opacity=".4" d="M12 3h3v3h-3z"></path><path d="M12 3v3h3V3h-3zm-1-1h5v5h-5V2z"></path><path opacity=".4" d="M6 3h3v3H6z"></path><path d="M6 3v3h3V3H6zM5 2h5v5H5V2z"></path><path opacity=".5" d="M0 17h21v1H0zM0 0h21v1H0z"></path></g></svg>
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svgs/wrap-center-v.svg b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/wrap-center-v.svg
new file mode 100644
index 000000000..b37af00b9
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/wrap-center-v.svg
@@ -0,0 +1 @@
+<svg width="13" height="17" viewBox="0 0 13 17"><g fill="currentColor" fill-rule="evenodd"><path opacity=".5" d="M6 0h1v17H6z"></path><path d="M8 3h5v5H8zm0 6h5v5H8z"></path><path opacity=".4" d="M1 4h3v3H1z"></path><path d="M1 4v3h3V4H1zM0 3h5v5H0V3z"></path><path opacity=".4" d="M1 10h3v3H1z"></path><path d="M1 10v3h3v-3H1zM0 9h5v5H0V9z"></path></g></svg>
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svgs/wrap-center.svg b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/wrap-center.svg
new file mode 100644
index 000000000..3d9a95e2d
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/wrap-center.svg
@@ -0,0 +1 @@
+<svg width="21" height="13" viewBox="0 0 21 13"><g fill="currentColor" fill-rule="evenodd"><path opacity=".5" d="M0 6h21v1H0z"></path><path d="M11 8h5v5h-5zM5 8h5v5H5z"></path><path opacity=".4" d="M12 1h3v3h-3z"></path><path d="M12 1v3h3V1h-3zm-1-1h5v5h-5V0z"></path><path opacity=".4" d="M6 1h3v3H6z"></path><path d="M6 1v3h3V1H6zM5 0h5v5H5V0z"></path></g></svg>
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svgs/wrap-end-v.svg b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/wrap-end-v.svg
new file mode 100644
index 000000000..3f44c3b10
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/wrap-end-v.svg
@@ -0,0 +1 @@
+<svg width="24" height="17" viewBox="0 0 24 17"><g fill="currentColor" fill-rule="evenodd"><path d="M17 3h5v5h-5zm0 6h5v5h-5z"></path><path opacity=".4" d="M12 4h3v3h-3z"></path><path d="M12 4v3h3V4h-3zm-1-1h5v5h-5V3z"></path><path opacity=".4" d="M12 10h3v3h-3z"></path><path d="M12 10v3h3v-3h-3zm-1-1h5v5h-5V9z"></path><path opacity=".5" d="M23 0h1v17h-1z"></path></g></svg>
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svgs/wrap-end.svg b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/wrap-end.svg
new file mode 100644
index 000000000..b3f2dbcc4
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/wrap-end.svg
@@ -0,0 +1 @@
+<svg width="21" height="18" viewBox="0 0 21 18"><g fill="currentColor" fill-rule="evenodd"><path d="M11 11h5v5h-5zm-6 0h5v5H5z"></path><path opacity=".4" d="M12 6h3v3h-3z"></path><path d="M12 6v3h3V6h-3zm-1-1h5v5h-5V5z"></path><path opacity=".4" d="M6 6h3v3H6z"></path><path d="M6 6v3h3V6H6zM5 5h5v5H5V5z"></path><path opacity=".5" d="M0 17h21v1H0z"></path></g></svg>
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svgs/wrap-start-v.svg b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/wrap-start-v.svg
new file mode 100644
index 000000000..59584a487
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/wrap-start-v.svg
@@ -0,0 +1 @@
+<svg width="24" height="17" viewBox="0 0 24 17"><g fill="currentColor" fill-rule="evenodd"><path opacity=".5" d="M0 0h1v17H0z"></path><path d="M8 3h5v5H8zm0 6h5v5H8z"></path><path opacity=".4" d="M3 4h3v3H3z"></path><path d="M3 4v3h3V4H3zM2 3h5v5H2V3z"></path><path opacity=".4" d="M3 10h3v3H3z"></path><path d="M3 10v3h3v-3H3zM2 9h5v5H2V9z"></path></g></svg>
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svgs/wrap-start.svg b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/wrap-start.svg
new file mode 100644
index 000000000..b8026c944
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/wrap-start.svg
@@ -0,0 +1 @@
+<svg width="21" height="18" viewBox="0 0 21 18"><g fill="currentColor" fill-rule="evenodd"><path opacity=".5" d="M0 0h21v1H0z"></path><path d="M11 8h5v5h-5zM5 8h5v5H5z"></path><path opacity=".4" d="M12 3h3v3h-3z"></path><path d="M12 3v3h3V3h-3zm-1-1h5v5h-5V2z"></path><path opacity=".4" d="M6 3h3v3H6z"></path><path d="M6 3v3h3V3H6zM5 2h5v5H5V2z"></path></g></svg>
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svgs/wrap-stretch-v.svg b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/wrap-stretch-v.svg
new file mode 100644
index 000000000..74f9063c2
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/wrap-stretch-v.svg
@@ -0,0 +1 @@
+<svg width="25" height="17" viewBox="0 0 25 17"><g fill="currentColor" fill-rule="evenodd"><path opacity=".5" d="M0 0h1v17H0zm12 0h1v17h-1zm12 0h1v17h-1z"></path><path d="M14 3h9v5h-9zm0 6h9v5h-9z"></path><path opacity=".4" d="M3 4h7v3H3z"></path><path d="M3 4v3h7V4H3zM2 3h9v5H2V3z"></path><path opacity=".4" d="M3 10h7v3H3z"></path><path d="M3 10v3h7v-3H3zM2 9h9v5H2V9z"></path></g></svg>
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svgs/wrap-stretch.svg b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/wrap-stretch.svg
new file mode 100644
index 000000000..e29efc9a2
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/wrap-stretch.svg
@@ -0,0 +1 @@
+<svg width="21" height="19" viewBox="0 0 21 19"><g fill="currentColor" fill-rule="evenodd"><path d="M11 11h5v6h-5zm-6 0h5v6H5z"></path><path opacity=".4" d="M12 3h3v4h-3zM6 3h3v4H6z"></path><path d="M6 3v4h3V3H6zM5 2h5v6H5V2zm7 1v4h3V3h-3zm-1-1h5v6h-5V2z"></path><path opacity=".5" d="M0 18h21v1H0zM0 0h21v1H0zm0 9h21v1H0z"></path></g></svg>
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/svgs/yes.svg b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/yes.svg
new file mode 100644
index 000000000..2ba94c0a3
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/svgs/yes.svg
@@ -0,0 +1,3 @@
+<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="200" height="200">
+  <path d="M426.014138 788.782837 511.416204 703.381795 895.71987 319.076082 810.320874 233.676064 426.014138 617.980753 212.512556 404.477125 127.111514 489.878167 340.613096 703.381795Z"></path>
+</svg>
\ No newline at end of file
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/typography/color.js b/packages/editor-setters/src/style-setter/lc-style-setter/typography/color.js
new file mode 100644
index 000000000..43de81074
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/typography/color.js
@@ -0,0 +1,42 @@
+import React, { Component, PropTypes } from 'react';
+import classNames from 'classnames';
+import ColorControl from '@ali/ve-color-control';
+import utils from '../utils';
+class Color extends Component {
+  static propTypes = {
+    prop: PropTypes.object,
+    className: PropTypes.string,
+  };
+
+  static displayName = 'StyleFontColorSetter';
+
+  static transducer = utils.transducer;
+
+  componentWillMount() {
+
+  }
+
+  componentWillUnmount() {
+
+  }
+
+  setColor(color) {
+    utils.setPropertyValue(this.props, 'color', color);
+  }
+
+  render() {
+    const className = classNames('vs-style-font-color', this.props.className);
+    const { current, inherit } = utils.getPropertyValue(this.props, 'color');
+
+    return (
+      <ColorControl
+        className={className}
+        value={current}
+        placeholder={inherit}
+        onChange={(value) => this.setColor(value)}
+      />
+    );
+  }
+}
+
+export default Color;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/typography/family.js b/packages/editor-setters/src/style-setter/lc-style-setter/typography/family.js
new file mode 100644
index 000000000..29495ee3f
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/typography/family.js
@@ -0,0 +1,159 @@
+import React, { Component, PropTypes } from 'react';
+import classNames from 'classnames';
+import SelectControl from '@ali/ve-select-control';
+import utils from '../utils';
+import $i18n from '../i18n/index';
+
+const fonts = [
+  {
+    text: $i18n.get({ id: 'styleArialHelveticaMicrosoftYahei', dm: 'Arial, Helvetica, 微软雅黑' }),
+    value: 'arial, helvetica, microsoft yahei',
+  },
+  {
+    text: $i18n.get({ id: 'styleArialHelveticaBlackBody', dm: 'Arial, Helvetica, 黑体' }),
+    value: 'arial, helvetica, simhei',
+  },
+  {
+    text: $i18n.get({ id: 'styleComicSansMSMicrosoft', dm: 'Comic Sans MS, 微软雅黑' }),
+    value: 'comic sans ms, microsoft yahei',
+  },
+  {
+    text: $i18n.get({ id: 'styleComicSansMSBlackbody', dm: 'Comic Sans MS, 黑体' }),
+    value: 'comic sans ms, simhei',
+  },
+  {
+    text: $i18n.get({ id: 'styleImpactMicrosoftYahei', dm: 'Impact, 微软雅黑' }),
+    value: 'impact, microsoft yahei',
+  },
+  {
+    text: $i18n.get({ id: 'styleImpactBlackBody', dm: 'Impact, 黑体' }),
+    value: 'impact, simhei',
+  },
+  {
+    text: $i18n.get({ id: 'styleLucidaSansUnicodeMicrosoft', dm: 'Lucida Sans Unicode, 微软雅黑' }),
+    value: 'lucida sans unicode, microsoft yahei',
+  },
+  {
+    text: $i18n.get({ id: 'styleLucidaSansUnicodeBlackbody', dm: 'Lucida Sans Unicode, 黑体' }),
+    value: 'lucida sans unicode, simhei',
+  },
+  {
+    text: $i18n.get({ id: 'styleTrebuchetMSMicrosoftYahei', dm: 'Trebuchet MS, 微软雅黑' }),
+    value: 'trebuchet ms, microsoft yahei',
+  },
+  {
+    text: $i18n.get({ id: 'styleTrebuchetMSBlackBody', dm: 'Trebuchet MS, 黑体' }),
+    value: 'trebuchet ms, simhei',
+  },
+  {
+    text: $i18n.get({ id: 'styleVerdanaMicrosoftYahei', dm: 'Verdana, 微软雅黑' }),
+    value: 'verdana, microsoft yahei',
+  },
+  {
+    text: $i18n.get({ id: 'styleVerdanaBlackBody', dm: 'Verdana, 黑体' }),
+    value: 'verdana, simhei',
+  },
+  {
+    text: $i18n.get({ id: 'styleGeorgiaMicrosoftYahei', dm: 'Georgia, 微软雅黑' }),
+    value: 'georgia, microsoft yahei',
+  },
+  {
+    text: $i18n.get({ id: 'styleGeorgiaBlackbody', dm: 'Georgia, 黑体' }),
+    value: 'georgia, simhei',
+  },
+  {
+    text: $i18n.get({
+      id: 'stylePalatinoLinotypeMicrosoftYahei',
+      dm: 'Palatino Linotype, 微软雅黑',
+    }),
+    value: 'palatino linotype, microsoft yahei',
+  },
+  {
+    text: $i18n.get({ id: 'stylePalatinoLinotypeBlackBody', dm: 'Palatino Linotype, 黑体' }),
+    value: 'palatino linotype, simhei',
+  },
+  {
+    text: $i18n.get({ id: 'styleTimesNewRomanMicrosoft', dm: 'Times New Roman, 微软雅黑' }),
+    value: 'times new roman, microsoft yahei',
+  },
+  {
+    text: $i18n.get({ id: 'styleTimesNewRomanBlackbody', dm: 'Times New Roman, 黑体' }),
+    value: 'times new roman, simhei',
+  },
+  {
+    text: $i18n.get({ id: 'styleCourierNewMicrosoftYahei', dm: 'Courier New, 微软雅黑' }),
+    value: 'courier new, microsoft yahei',
+  },
+  {
+    text: $i18n.get({ id: 'styleCourierNewBlackbody', dm: 'Courier New, 黑体' }),
+    value: 'courier new, simhei',
+  },
+  {
+    text: $i18n.get({ id: 'styleLucidaConsoleMicrosoftYahei', dm: 'Lucida Console, 微软雅黑' }),
+    value: 'lucida console, microsoft yahei',
+  },
+  {
+    text: $i18n.get({ id: 'styleLucidaConsoleBlackbody', dm: 'Lucida Console, 黑体' }),
+    value: 'lucida console, simhei',
+  },
+];
+
+class FamilyItem extends Component {
+  static propTypes = {
+    font: PropTypes.object,
+  };
+
+  render() {
+    const { font } = this.props;
+    return (
+      <div
+        className="vs-style-familyitem"
+        style={{
+          fontFamily: font.value,
+        }}
+      >
+        {font.text}
+      </div>
+    );
+  }
+}
+
+class Family extends Component {
+  static propTypes = {
+    prop: PropTypes.object,
+    className: PropTypes.string,
+  };
+
+  static displayName = 'StyleFontFamilySetter';
+
+  static transducer = utils.transducer;
+
+  componentWillMount() {
+
+  }
+
+  componentWillUnmount() {
+
+  }
+
+  render() {
+    const className = classNames('vs-style-font-family', this.props.className);
+    const family = utils.getFont(this.props, 'font-family').value;
+    const options = fonts.map(font => ({
+      text: <FamilyItem key={font.value} font={font} />,
+      value: font.value,
+    }));
+
+    return (
+      <SelectControl
+        className={className}
+        options={options}
+        value={family}
+        onChange={val => utils.setFont(this.props, 'font-family', val)}
+        syncTargetWidth
+      />
+    );
+  }
+}
+
+export default Family;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/typography/index.js b/packages/editor-setters/src/style-setter/lc-style-setter/typography/index.js
new file mode 100644
index 000000000..f975c0421
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/typography/index.js
@@ -0,0 +1,143 @@
+import React, { Component, PropTypes } from 'react';
+import classNames from 'classnames';
+import Field from '@ali/ve-field';
+import Icons from '@ali/ve-icons';
+import Family from './family';
+import Weight from './weight';
+import Style from './style';
+import Color from './color';
+import Size from './size';
+import LineHeight from './lineheight';
+import TextAlign from './textalign';
+import TextDecoration from './textdecoration';
+import utils from '../utils';
+import $i18n from '../i18n/index';
+
+class Typography extends Component {
+  static propTypes = {
+    prop: PropTypes.object,
+    className: PropTypes.string,
+  };
+
+  static displayName = 'StyleTypographySetter';
+
+  static transducer = utils.transducer;
+
+  componentWillMount() {
+
+  }
+
+  // shouldComponentUpdate() {
+  //   return false;
+  // }
+
+  componentWillUnmount() {
+
+  }
+
+  render() {
+    const className = classNames('vs-style-typography', this.props.className);
+    return (
+      <div className={className}>
+        <Field
+          display="inline"
+          highlight={utils.getCurrentPropertyHighlight(this.props, 'font-family')}
+          title={(
+<span data-tip={$i18n.get({ id: 'styleFont', dm: '字体' })}>
+              <Icons name="style.font-family" size="medium" />
+</span>
+)}
+        >
+          <Family {...this.props} />
+        </Field>
+        <Field display="plain" className="vs-flex-field">
+          <Field
+            display="inline"
+            highlight={utils.getCurrentPropertyHighlight(this.props, 'font-weight')}
+            title={(
+<span data-tip={$i18n.get({ id: 'styleWordWeight', dm: '字重' })}>
+                <Icons name="style.font-weight" size="medium" />
+</span>
+)}
+          >
+            <Weight {...this.props} />
+          </Field>
+          <Field
+            display="inline"
+            highlight={utils.getCurrentPropertyHighlight(this.props, 'font-style')}
+            title={(
+<span data-tip={$i18n.get({ id: 'styleStyle', dm: '样式' })}>
+                <Icons name="style.font-style" size="medium" />
+</span>
+)}
+          >
+            <Style {...this.props} />
+          </Field>
+        </Field>
+        <Field
+          display="inline"
+          highlight={utils.getCurrentPropertyHighlight(this.props, 'color')}
+          title={(
+<span data-tip={$i18n.get({ id: 'styleFontColor', dm: '字体颜色' })}>
+              <Icons name="style.color" size="16px" />
+</span>
+)}
+        >
+          <Color {...this.props} />
+        </Field>
+        <Field display="plain" className="vs-flex-field">
+          <Field
+            display="inline"
+            highlight={utils.getCurrentPropertyHighlight(this.props, 'font-size')}
+            title={(
+<span data-tip={$i18n.get({ id: 'styleSize', dm: '大小' })}>
+                <Icons name="style.font-size" size="medium" />
+</span>
+)}
+          >
+            <Size {...this.props} />
+          </Field>
+          <Field
+            display="inline"
+            highlight={utils.getCurrentPropertyHighlight(this.props, 'line-height')}
+            title={(
+<span data-tip={$i18n.get({ id: 'styleRowHeight', dm: '行高' })}>
+                <Icons name="style.line-height" size="medium" />
+</span>
+)}
+          >
+            <LineHeight {...this.props} />
+          </Field>
+        </Field>
+        <Field display="plain" className="vs-flex-field">
+          <Field
+            display="inline"
+            highlight={utils.getCurrentPropertyHighlight(this.props, 'text-align')}
+            title={(
+<span data-tip={$i18n.get({ id: 'styleAlign', dm: '对齐' })}>
+                <Icons name="style.text-align" size="16px" />
+</span>
+)}
+          >
+            <TextAlign {...this.props} />
+          </Field>
+        </Field>
+        <Field display="plain" className="vs-flex-field">
+          <Field
+            display="inline"
+            highlight={utils.getCurrentPropertyHighlight(this.props, 'text-decoration')}
+            title={(
+<span data-tip={$i18n.get({ id: 'styleModification', dm: '修饰' })}>
+                <Icons name="style.text-decoration" size="16px" />
+</span>
+)}
+          >
+            <TextDecoration {...this.props} />
+          </Field>
+        </Field>
+      </div>
+    );
+  }
+}
+
+export default Typography;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/typography/lineheight.js b/packages/editor-setters/src/style-setter/lc-style-setter/typography/lineheight.js
new file mode 100644
index 000000000..97c86fb15
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/typography/lineheight.js
@@ -0,0 +1,58 @@
+import React, { Component, PropTypes } from 'react';
+import classNames from 'classnames';
+import NumberControl from '@ali/ve-number-control';
+import utils from '../utils';
+class LineHeight extends Component {
+  static propTypes = {
+    prop: PropTypes.object,
+    className: PropTypes.string,
+  };
+
+  static displayName = 'StyleLineHeightSetter';
+
+  static transducer = utils.transducer;
+
+  componentWillMount() {
+
+  }
+
+  componentWillUnmount() {
+
+  }
+
+  render() {
+    const className = classNames('vs-style-line-height', this.props.className);
+    const { current, inherit } = utils.getFont(this.props, 'line-height');
+
+    return (
+      <NumberControl
+        className={className}
+        placeholder={inherit}
+        value={current}
+        onChange={(val) => utils.setFont(this.props, 'line-height', val)}
+        min={0}
+        units={[{
+          type: '-',
+          list: true,
+          cast() {
+            return '1-';
+          },
+        }, {
+          type: 'px',
+          list: true,
+        }, {
+          type: '%',
+          list: true,
+        }, {
+          type: 'em',
+          list: true,
+        }, {
+          type: 'normal',
+          preset: true,
+        }, 'rem', 'pt']}
+      />
+    );
+  }
+}
+
+export default LineHeight;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/typography/size.js b/packages/editor-setters/src/style-setter/lc-style-setter/typography/size.js
new file mode 100644
index 000000000..1ca9a55c2
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/typography/size.js
@@ -0,0 +1,75 @@
+import React, { Component, PropTypes } from 'react';
+import classNames from 'classnames';
+import NumberControl from '@ali/ve-number-control';
+import utils from '../utils';
+class Size extends Component {
+  static propTypes = {
+    prop: PropTypes.object,
+    className: PropTypes.string,
+  };
+
+  static displayName = 'StyleFontSizeSetter';
+
+  static transducer = utils.transducer;
+
+  componentWillMount() {
+
+  }
+
+  componentWillUnmount() {
+
+  }
+
+  render() {
+    const className = classNames('vs-style-font-size', this.props.className);
+    const { current, inherit } = utils.getFont(this.props, 'font-size');
+    return (
+      <NumberControl
+        className={className}
+        placeholder={inherit}
+        value={current}
+        onChange={(val) => utils.setFont(this.props, 'font-size', val)}
+        min={0}
+        units={[{
+          type: 'px',
+          list: true,
+        }, {
+          type: '%',
+          list: true,
+        }, {
+          type: 'em',
+          list: true,
+        }, {
+          type: 'xx-small',
+          preset: true,
+        }, {
+          type: 'x-small',
+          preset: true,
+        }, {
+          type: 'small',
+          preset: true,
+        }, {
+          type: 'medium',
+          preset: true,
+        }, {
+          type: 'large',
+          preset: true,
+        }, {
+          type: 'x-large',
+          preset: true,
+        }, {
+          type: 'xx-large',
+          preset: true,
+        }, {
+          type: 'larger',
+          preset: true,
+        }, {
+          type: 'smaller',
+          preset: true,
+        }, 'rem', 'pt']}
+      />
+    );
+  }
+}
+
+export default Size;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/typography/style.js b/packages/editor-setters/src/style-setter/lc-style-setter/typography/style.js
new file mode 100644
index 000000000..b9917a4ba
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/typography/style.js
@@ -0,0 +1,49 @@
+import React, { Component, PropTypes } from 'react';
+import classNames from 'classnames';
+import ChoiceControl from '@ali/ve-choice-control';
+import Icons from '@ali/ve-icons';
+import utils from '../utils';
+class Style extends Component {
+  static propTypes = {
+    prop: PropTypes.object,
+    className: PropTypes.string,
+  };
+
+  static displayName = 'StyleFontStyleSetter';
+
+  static transducer = utils.transducer;
+
+  componentWillMount() {
+
+  }
+
+  componentWillUnmount() {
+
+  }
+
+  render() {
+    const className = classNames('vs-style-font-style', this.props.className);
+    let style = utils.getFont(this.props, 'font-style').value;
+    if (style === 'oblique') {
+      style = 'italic';
+    }
+    const options = [{
+      title: <Icons name="style.normal" size="12px" />,
+      value: 'normal',
+    }, {
+      title: <Icons name="style.italic" size="12px" />,
+      value: 'italic',
+    }];
+
+    return (
+      <ChoiceControl
+        className={className}
+        options={options}
+        value={style}
+        onChange={(value) => utils.setFont(this.props, 'font-style', value)}
+      />
+    );
+  }
+}
+
+export default Style;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/typography/textalign.js b/packages/editor-setters/src/style-setter/lc-style-setter/typography/textalign.js
new file mode 100644
index 000000000..f3825d4dd
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/typography/textalign.js
@@ -0,0 +1,57 @@
+import React, { Component, PropTypes } from 'react';
+import classNames from 'classnames';
+import ChoiceControl from '@ali/ve-choice-control';
+import Icons from '@ali/ve-icons';
+import utils from '../utils';
+const aligns = [{
+  title: <Icons name="style.text-align-left" size="10px" />,
+  value: 'left',
+}, {
+  title: <Icons name="style.text-align-center" size="10px" />,
+  value: 'center',
+}, {
+  title: <Icons name="style.text-align-left" className="vs-style-reverse-v-h" size="10px" />,
+  value: 'right',
+}, {
+  title: <Icons name="style.text-align-justify" size="10px" />,
+  value: 'justify',
+}];
+
+class TextAlign extends Component {
+  static propTypes = {
+    prop: PropTypes.object,
+    className: PropTypes.string,
+  };
+
+  static displayName = 'StyleTextAlignSetter';
+
+  static transducer = utils.transducer;
+
+  componentWillMount() {
+
+  }
+
+  componentWillUnmount() {
+
+  }
+
+  setTextAlign(align) {
+    utils.setPropertyValue(this.props, 'text-align', align);
+  }
+
+  render() {
+    const className = classNames('vs-style-text-align', this.props.className);
+    const align = utils.getPropertyValue(this.props, 'text-align').value;
+
+    return (
+      <ChoiceControl
+        className={className}
+        options={aligns}
+        value={align}
+        onChange={(value) => this.setTextAlign(value)}
+      />
+    );
+  }
+}
+
+export default TextAlign;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/typography/textdecoration.js b/packages/editor-setters/src/style-setter/lc-style-setter/typography/textdecoration.js
new file mode 100644
index 000000000..07286b5fa
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/typography/textdecoration.js
@@ -0,0 +1,54 @@
+import React, { Component, PropTypes } from 'react';
+import classNames from 'classnames';
+import ChoiceControl from '@ali/ve-choice-control';
+import Icons from '@ali/ve-icons';
+import utils from '../utils';
+const decorations = [{
+  title: <Icons name="style.none" size="10px" />,
+  value: 'none',
+}, {
+  title: <Icons name="style.underline" size="10px" />,
+  value: 'underline',
+}, {
+  title: <Icons name="style.line-through" size="10px" />,
+  value: 'line-through',
+}];
+
+class TextDecoration extends Component {
+  static propTypes = {
+    prop: PropTypes.object,
+    className: PropTypes.string,
+  };
+
+  static displayName = 'StyleTextDecorationSetter';
+
+  static transducer = utils.transducer;
+
+  componentWillMount() {
+
+  }
+
+  componentWillUnmount() {
+
+  }
+
+  setTextDecoration(align) {
+    utils.setPropertyValue(this.props, 'text-decoration', align);
+  }
+
+  render() {
+    const className = classNames('vs-style-text-decoration', this.props.className);
+    const decoration = utils.getPropertyValue(this.props, 'text-decoration').value;
+
+    return (
+      <ChoiceControl
+        className={className}
+        options={decorations}
+        value={decoration}
+        onChange={(value) => this.setTextDecoration(value)}
+      />
+    );
+  }
+}
+
+export default TextDecoration;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/typography/weight.js b/packages/editor-setters/src/style-setter/lc-style-setter/typography/weight.js
new file mode 100644
index 000000000..4fca5c8f4
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/typography/weight.js
@@ -0,0 +1,88 @@
+import React, { Component, PropTypes } from 'react';
+import classNames from 'classnames';
+import SelectControl from '@ali/ve-select-control';
+import utils from '../utils';
+const weights = [{
+  text: '100 Thin',
+  value: '100',
+}, {
+  text: '100 Extra Light',
+  value: '200',
+}, {
+  text: '100 Light',
+  value: '300',
+}, {
+  text: '400 Normal',
+  value: '400',
+}, {
+  text: '500 Medium',
+  value: '500',
+}, {
+  text: '600 Semi Bold',
+  value: '600',
+}, {
+  text: '700 Bold',
+  value: '700',
+}, {
+  text: '800 Extra Bold',
+  value: '800',
+}, {
+  text: '900 Black',
+  value: '900',
+}, {
+  text: 'Lighter',
+  value: 'lighter',
+}, {
+  text: 'Bolder',
+  value: 'bolder',
+}];
+
+class Weight extends Component {
+  static propTypes = {
+    prop: PropTypes.object,
+    className: PropTypes.string,
+  };
+
+  static displayName = 'StyleFontWeightSetter';
+
+  static transducer = utils.transducer;
+
+  componentWillMount() {
+
+  }
+
+  componentWillUnmount() {
+
+  }
+
+  setWeight(weight) {
+    if (weight === '400') {
+      weight = 'normal';
+    } else if (weight === '700') {
+      weight = 'bold';
+    }
+    utils.setFont(this.props, 'font-weight', weight);
+  }
+
+  render() {
+    const className = classNames('vs-style-font-weight', this.props.className);
+    let weight = utils.getFont(this.props, 'font-weight').value;
+
+    if (weight === 'normal') {
+      weight = '400';
+    } else if (weight === 'bold') {
+      weight = '700';
+    }
+
+    return (
+      <SelectControl
+        className={className}
+        options={weights}
+        value={weight}
+        onChange={(value) => this.setWeight(value)}
+      />
+    );
+  }
+}
+
+export default Weight;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/utils.js b/packages/editor-setters/src/style-setter/lc-style-setter/utils.js
new file mode 100644
index 000000000..a55626da4
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/utils.js
@@ -0,0 +1,280 @@
+import parseCssFont from 'parse-css-font';
+import valueParser, { stringify } from 'postcss-value-parser';
+import { cssToRuntime, toNativeStyle, normalizeStyle, toCss } from '@ali/vu-css-style';
+import backgroundParser from './background/parser';
+
+function getComputePropertyValue(node, property) {
+  const nativeNode = node;
+  if (!nativeNode) return null;
+  return window.getComputedStyle(nativeNode, null).getPropertyValue(property);
+}
+
+function getStylePropertyValue(style, property) {
+  if (!style) {
+    return null;
+  }
+  return style[property];
+}
+
+function isEmptyCssValue(value) {
+  return value == null || value === '';
+}
+
+function notEmptyValue(v1, last) {
+  return isEmptyCssValue(v1) ? last : v1;
+}
+
+function isString(str) {
+  return {}.toString.call(str) === '[object String]';
+}
+
+function getInheritPropertyValue(style, property, node) {
+  return node ? getComputePropertyValue(node, property) : null;
+}
+
+// property: padding/padding-top/../margin/margin-top/..
+function getPropertyValue(props, property) {
+  const style = props.value || props.defaultValue || {};
+  const current = getStylePropertyValue(style, property);
+  const inherit = getInheritPropertyValue(
+    style, property, props.node);
+
+  return { current, inherit, value: notEmptyValue(current, inherit) };
+}
+
+const transducer = {
+  toHot(style) {
+    let runtime;
+    let native;
+    let css;
+
+    if (isString(style)) {
+      css = style;
+      runtime = cssToRuntime(style);
+      native = toNativeStyle(runtime);
+    } else {
+      runtime = normalizeStyle(style);
+      native = toNativeStyle(runtime);
+      css = toCss(runtime);
+    }
+
+    return {
+      source: css,
+      runtime,
+      native,
+    };
+  },
+  toNative(hotval) {
+    return hotval.native;
+  },
+};
+
+function setHotValueFromRuntime(props, runtime) {
+  const native = toNativeStyle(runtime);
+  const css = toCss(runtime);
+  props.onChange({
+    source: css,
+    runtime,
+    native,
+  });
+}
+
+// TODO: 废弃
+function setHotValueFromSource(props, source) {
+  // do nothing
+
+}
+
+function setValue(scope, property, value) {
+  if (isEmptyCssValue(value)) {
+    delete scope[property];
+  } else {
+    // delete key to ensure the new key is placed on the last
+    // to have the highest priority of some css props
+    delete scope[property];
+    scope[property] = value;
+  }
+}
+
+function getCurrentPropertyValue(props, property) {
+  const style = props.value || props.defaultValue || {};
+  return getStylePropertyValue(style, property);
+}
+
+function getCurrentPropertyHighlight(props, property) {
+  const style = props.value || props.defaultValue || {};
+  return getStylePropertyValue(style, property) != undefined;
+}
+
+function setPropertyValue(props, property, value) {
+  const isMulti = typeof property === 'object' && property;
+  let style = props.value || props.defaultValue || {};
+
+  const scope = style;
+
+  if (isMulti) {
+    Object.keys(property).forEach((key) => {
+      setValue(scope, key, property[key]);
+    });
+  } else {
+    setValue(scope, property, value);
+  }
+
+  setHotValueFromRuntime(props, style);
+}
+
+function parseFont(font) {
+  let parsed;
+  try {
+    parsed = parseCssFont(font || '');
+  } catch (e) {
+    return {};
+  }
+  return {
+    'font-size': parsed.size,
+    'font-family': parsed.family ? parsed.family.join(',') : '',
+    'font-style': parsed.style,
+    'font-variant': parsed.variant,
+    'font-weight': parsed.weight,
+    'font-stretch': parsed.stretch,
+    'line-height': parsed.lineHeight,
+  };
+}
+
+function parseBackground(background) {
+  if (!background || background === 'initial') {
+    return [{}];
+  }
+
+  return backgroundParser(background);
+}
+
+function getFont(props, item) {
+  let { current, inherit } = getPropertyValue(props, item);
+  const font = getPropertyValue(props, 'font');
+  if (isEmptyCssValue(current)) {
+    current = parseFont(font.current)[item];
+  }
+  if (isEmptyCssValue(inherit)) {
+    inherit = parseFont(font.inherit)[item];
+  }
+  return {
+    current,
+    inherit,
+    value: notEmptyValue(current, inherit),
+  };
+}
+
+function buildBackground(background) {
+  return backgroundParser.build(background);
+}
+
+function getBackground(props, item) {
+  let { current, inherit } = getPropertyValue(props, item);
+  const background = getPropertyValue(props, 'background');
+  // if (item === 'background-position') { }
+  if (isEmptyCssValue(current)) {
+    current = parseBackground(background.current).pop()[item];
+  }
+  if (isEmptyCssValue(inherit)) {
+    inherit = parseBackground(background.inherit).pop()[item];
+  }
+  return {
+    current,
+    inherit,
+    value: notEmptyValue(current, inherit),
+  };
+}
+
+function setBackground(props, item, value) {
+  const background = getCurrentPropertyValue(props, 'background');
+  const bgs = parseBackground(background);
+  const bg = bgs.pop();
+
+  if (!isEmptyCssValue(bg['background-image']) || !isEmptyCssValue(bg['background-color'])) {
+    bg[item] = value;
+    bgs.push(bg);
+    setPropertyValue(props, {
+      background: buildBackground(bgs),
+      [item]: null,
+    });
+  } else {
+    setPropertyValue(props, item, value);
+  }
+}
+
+function buildFont(font) {
+  let size = font['font-size'];
+  if (!isEmptyCssValue(font['line-height'])) {
+    size = `${size}/${font['line-height']}`;
+  }
+  let ret = `${size} ${font['font-family']}`;
+  if (!isEmptyCssValue(font['font-stretch'])) {
+    ret = `${font['font-stretch']} ${ret}`;
+  }
+  if (!isEmptyCssValue(font['font-weight'])) {
+    ret = `${font['font-weight']} ${ret}`;
+  }
+  if (!isEmptyCssValue(font['font-variant'])) {
+    ret = `${font['font-variant']} ${ret}`;
+  }
+  if (!isEmptyCssValue(font['font-style'])) {
+    ret = `${font['font-style']} ${ret}`;
+  }
+  return ret;
+}
+
+function setFont(props, item, value) {
+  const font = getCurrentPropertyValue(props, 'font');
+  const parsed = parseFont(font);
+
+  if (!isEmptyCssValue(parsed['font-size']) && !isEmptyCssValue(parsed['font-family'])) {
+    parsed[item] = value;
+    setPropertyValue(props, {
+      font: buildFont(parsed),
+      [item]: null,
+    });
+  } else {
+    setPropertyValue(props, item, value);
+  }
+}
+
+function getImageUrl(image) {
+  if (!image || image === 'none') {
+    return image;
+  }
+
+  let nodes = valueParser(image).nodes;
+  if (!nodes) {
+    return '';
+  }
+
+  let node = nodes[0];
+  if (node.type !== 'function' && node.value !== 'url') {
+    return '';
+  }
+  nodes = node.nodes;
+  node = nodes.find(item => item.type === 'string');
+  if (node) {
+    return node.value;
+  }
+  return stringify(nodes);
+}
+
+export default {
+  transducer,
+  getComputePropertyValue,
+  getCurrentPropertyValue,
+  getInheritPropertyValue,
+  isEmptyCssValue,
+  notEmptyValue,
+  getPropertyValue,
+  setPropertyValue,
+  setHotValueFromSource,
+  getFont,
+  setFont,
+  getBackground,
+  setBackground,
+  getImageUrl,
+  getCurrentPropertyHighlight,
+};
diff --git a/packages/plugin-source-editor/package.json b/packages/plugin-source-editor/package.json
index 1f64a3c8b..bfb258981 100644
--- a/packages/plugin-source-editor/package.json
+++ b/packages/plugin-source-editor/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ali/lowcode-plugin-source-editor",
-  "version": "1.0.12",
+  "version": "1.0.12-beta0",
   "description": "alibaba lowcode editor source-editor plugin",
   "files": [
     "es",
diff --git a/packages/plugin-source-editor/src/index.scss b/packages/plugin-source-editor/src/index.scss
index 1313ba8e5..da05d24cf 100644
--- a/packages/plugin-source-editor/src/index.scss
+++ b/packages/plugin-source-editor/src/index.scss
@@ -37,17 +37,30 @@
     opacity: 1;
     height: 100%;
   }
-
-  .full-screen-container{
-    position: absolute;
-    top: 40px;
-    right: 20px;
-    cursor: pointer;
-    img{
-      width: 20px;
-      height: 20px;
-    }
-  }
-
+}
+
+
+.full-screen-container{
+  position: absolute;
+  top: 0px;
+  right: 20px;
+  z-index: 100;
+  cursor: pointer;
+  img{
+    width: 20px;
+    height: 20px;
+  }
+}
+
+.min-screen-container{
+  position: absolute;
+  top: 10px;
+  right: 150px;
+  z-index: 100;
+  cursor: pointer;
+  img{
+    width: 20px;
+    height: 20px;
+  }
 }
 
diff --git a/packages/plugin-source-editor/src/index.tsx b/packages/plugin-source-editor/src/index.tsx
index e803caacd..fb8551d6b 100644
--- a/packages/plugin-source-editor/src/index.tsx
+++ b/packages/plugin-source-editor/src/index.tsx
@@ -55,9 +55,15 @@ export default class SourceEditor extends Component<{
 
   private editorNode: any;
 
+  private originSize: {
+    width: '',
+    height: ''
+  }
+
   state = {
     isShowSaveBtn: true,
     visiable: false,
+    fullScreenStatus:false
   };
 
   // eslint-disable-next-line react/no-deprecated
@@ -202,7 +208,10 @@ export default class SourceEditor extends Component<{
 
   fullScreen = () => {
     document.body.appendChild(this.editorNode);
-
+    // this.originSize = {
+    //   width: this.editorNode.clientWidth,
+    //   height: this.editorNode.clientHeight
+    // }
     const fullScreenOption = {
       ...defaultEditorOption,
       lineNumbers: 'on',
@@ -213,9 +222,36 @@ export default class SourceEditor extends Component<{
       },
     };
 
+    this.monocoEditor.layout({
+      height: document.body.clientHeight,
+      width: document.body.clientWidth
+    })
+
     this.monocoEditor.updateOptions(fullScreenOption);
+    this.setState({
+      fullScreenStatus:true
+    })
   };
 
+
+  minScreen = () => {
+
+    // document.body.removeChild(this.editorNode);
+    let  node=document.getElementById("editor-context-container").lastChild;
+    document.getElementById('editor-context-container')?.insertBefore(node,this.editorNode);
+
+    const minScreenOption = {
+      ...defaultEditorOption
+    };
+
+
+    this.monocoEditor.updateOptions(minScreenOption);
+    this.setState({
+      fullScreenStatus:false
+    })
+
+  }
+
   onTabChange = (key) => {
     const { editor } = this.props;
     const schema = editor.get('designer').project.getSchema();
@@ -276,7 +312,7 @@ export default class SourceEditor extends Component<{
   };
 
   render() {
-    const { selectTab, jsCode, css, isShowSaveBtn, visiable } = this.state;
+    const { selectTab, jsCode, css, isShowSaveBtn, visiable,fullScreenStatus } = this.state;
     const tabs = [
       { tab: 'index.js', key: TAB_KEY.JS_TAB },
       { tab: 'style.css', key: TAB_KEY.CSS_TAB },
@@ -293,8 +329,9 @@ export default class SourceEditor extends Component<{
         </Tab>
         { isShowSaveBtn && <div className="button-container"><Button type="primary" onClick={() => this.saveSchema(true)}>保存代码</Button></div>}
         { visiable &&
-          <div style={{ height: '100%' }} className="editor-context-container">
+          <div style={{ height: '100%' }} className="editor-context-container" id="editor-context-container">
             <div id="jsEditorDom" className="editor-context" ref={this.editorJsRef}>
+      
               <MonacoEditor
                 value={jsCode}
                 {...defaultEditorOption}
@@ -302,6 +339,17 @@ export default class SourceEditor extends Component<{
                 onChange={(newCode) => this.updateCode(newCode)}
                 editorDidMount={(editor, useMonaco) => this.editorDidMount.call(this, editor, useMonaco, TAB_KEY.JS_TAB)}
               />
+
+              {
+                 !fullScreenStatus?
+                 <div className="full-screen-container" onClick={this.fullScreen}>
+                  <img src="https://gw.alicdn.com/tfs/TB1d7XqE1T2gK0jSZFvXXXnFXXa-200-200.png"></img>
+                </div>:
+                <div className="min-screen-container" onClick={this.minScreen}>
+                  <img src="https://gw.alicdn.com/tfs/TB1IIonZHY1gK0jSZTEXXXDQVXa-200-200.png"></img>
+                </div>
+              }
+
             </div>
             <div className="editor-context" id="cssEditorDom" ref={this.editorCssRef}>
               <MonacoEditor
@@ -314,9 +362,7 @@ export default class SourceEditor extends Component<{
             </div>
           </div>
         }
-        {/* <div className="full-screen-container" onClick={this.fullScreen}>
-          <img src="https://gw.alicdn.com/tfs/TB1d7XqE1T2gK0jSZFvXXXnFXXa-200-200.png"></img>
-        </div> */}
+
       </div>
     );
   }
diff --git a/packages/plugin-source-editor/src/transform.ts b/packages/plugin-source-editor/src/transform.ts
index 934b984e2..cbb4a2a0c 100644
--- a/packages/plugin-source-editor/src/transform.ts
+++ b/packages/plugin-source-editor/src/transform.ts
@@ -29,7 +29,6 @@ const transfrom = {
       functionMap.state = stateData;
     }
 
-
     while (true) {
       const functionNameStr = this.pickupFunctionName(codeNew);
       if (functionNameStr != null) {
@@ -83,8 +82,10 @@ const transfrom = {
   pickupFunctionName(codeStr) {
     // 函数名的正则表达式
     // eslint-disable-next-line no-useless-escape
-    const reg = /\w+\s?\((\w|\,|\s)*\)\s?\{/;
+    const reg = /\w+\s?\((\w|\,|\s|\{|\}|\=|\'|\")*\)\s?\{/;
     const result = codeStr.match(reg);
+    
+
     if (result && result[0]) {
       const functionNameStr = result[0];
       return functionNameStr;
diff --git a/packages/react-renderer/package.json b/packages/react-renderer/package.json
index 9e37a2cbe..90ffbc07b 100644
--- a/packages/react-renderer/package.json
+++ b/packages/react-renderer/package.json
@@ -53,5 +53,5 @@
   "publishConfig": {
     "registry": "http://registry.npm.alibaba-inc.com"
   },
-  "homepage": "https://unpkg.alibaba-inc.com/@ali/lowcode-react-renderer@1.0.11/build/index.html"
+  "homepage": "https://unpkg.alibaba-inc.com/@ali/lowcode-react-renderer@1.0.12/build/index.html"
 }