svag

svag is the ultimate collection of SVaG elements which can be used to create mockups of the UI by dynamically generating SVGs. It contains all packages from the @svag scope.

yarn add -E svag

Table Of Contents

• Table Of Contents
• API
• Window(options: WindowOptions): string
  • WindowOptions
• Shadow(options: ShadowOptions): { translate: string, shadow: string }
  • ShadowOptions
• Toolbar(options: ToolbarOptions): string
  • ToolbarOptions
• Lib
  • Elements
• TODO
• Copyright

API

The package is available by importing its named exports which are the components. The library methods can be imported from svag/lib alias.

import {
  Window,
  Shadow,
  Toolbar,
} from 'svag'
import {
  makeElement,
  roundedCorner,
  minify
  svg,
  rect,
} from 'svag/lib'

Window(  options: WindowOptions,): string

Creates a @svag/window.

WindowOptions

| Name | Type | Description | Default | | ---- | ---- | ----------- | ------- | | content* | string | The content to display inside of the window. | - | | width* | number | The width of the content. | - | | height* | number | The height of the content. | - | | backgroundColor | string | The color of the window. | #000000 | | foregroundColor | string | The foreground color of the container group which will hold the content. | #FFFFFF | | noStretch | boolean | Do not stretch the SVG when embedded as an image. This is achieved by explicitly setting width and height attributes on the svg element. | false | | title | string | An optional title for the window. | - | | attributes | object | Any additional attributes to set on the holder of the content, e.g., font-family. | - | | minWidth | number | The minimum width that the window should take. If the content's width is greater than this value, the height will adjust to the content. | - | | minHeight | number | The minimum height that the window should take. If the content's height is greater than this value, the height will adjust to the content. | - | | paddingY | number | The padding on the Y-axis (top and bottom). | 5 | | paddingX | number | The padding on the X-axis (left and right). | 5 | | noShadow | boolean | Disable the dropping shadow. | false | | minify | boolean | Remove whitespace between tags (e.g., between > and <). If there are any problems with generated SVG, this could be disabled. | true |

Shadow(  options: ShadowOptions,): { translate: string, shadow: string }

Creates a @svag/shadow. It will be able to resize on mobile Safari without the window's contents loosing quality.

ShadowOptions: Options to generate macOS like shadow using a blur filter.

| Name | Type | Description | Default | | ---- | ---- | ----------- | ------- | | width* | number | The width of the window. | - | | height* | number | The height of the window. | - | | rx | number | The x corner radius of a window which drops the shadow. | 6 | | ry | number | The y corner radius of a window which drops the shadow. | 6 | | offsetY | number | The offset from the top of the window. | 25 | | stdDeviation | number | The standard deviation for the blur. It will spread twice this distance in each direction. | 27.5 |

Toolbar(  options: ToolbarOptions,): string

Returns a new @svag/toolbar either with or without a title.

ToolbarOptions: Options to make a toolbar.

| Name | Type | Description | Default | | ---- | ---- | ----------- | ------- | | width* | number | The width of the toolbar. | - | | title | string | An optional title to display in the toolbar. | - |

Lib

The @svag/lib has a number of methods to create dynamically generated SVGs.

• makeElement: create a new SVG element.
• roundedCorner: write a C directive of the path to make a rounded corner, e.g., to create rectangles with only some rounded corners.
• minify: remove whitespace between tags.

Elements: For easier access to elements, some of them were converted into methods, along with their documentation. The autocompletion hints can be accessed by hitting ctrlspace combination when writing a call to any API function.

• svg: make a complete svg image.
• react: draw a rectangle.

TODO

• [ ] Add a note about VS Code hints to the @svag/lib package.

Copyright

(c) SVaG 2018