doc: new SVG option of the component lazy-img

Author: peterpeterparker

README.md

@@ -29,7 +29,7 @@ The [DeckDeckGo website](https://github.com/deckgo/deckdeckgo-website) is a full
 
 | Project | Version | Online | Links |
 | ------- | ------- | ------- |:-----:|
-| **Documentation** | [![version](https://img.shields.io/static/v1.svg?label=production&message=v1.0.0-alpha.19&color=success)](https://docs.deckdeckgo.com) | [https://docs.deckdeckgo.com](https://docs.deckdeckgo.com) | [`README.md`](docs/README.md)
+| **Documentation** | [![version](https://img.shields.io/static/v1.svg?label=production&message=v1.0.0-alpha.21&color=success)](https://docs.deckdeckgo.com) | [https://docs.deckdeckgo.com](https://docs.deckdeckgo.com) | [`README.md`](docs/README.md)
 | **Remote control** | [![version](https://img.shields.io/static/v1.svg?label=production&message=v1.0.0-alpha.12&color=success)](https://deckdeckgo.app) | [https://deckdeckgo.app](https://deckdeckgo.app) | [`README.md`](remote/README.md)
 | **Studio** | ![version](https://img.shields.io/static/v1.svg?label=in%20development&message=v1.0.0-alpha.4&color=orange) | | [`README.md`](studio/README.md)
 | **Website** | [![version](https://img.shields.io/static/v1.svg?label=production&message=v1.0.0-beta.15&color=success)](https://deckdeckgo.com) | [https://deckdeckgo.com](https://deckdeckgo.com) | [`Repo`](https://github.com/deckgo/deckdeckgo-website/)

docs/CHANGELOG.md

@@ -1,3 +1,10 @@
+<a name="1.0.0-alpha.21"></a>
+# 1.0.0-alpha.21 (2019-07-17)
+
+### Features
+
+* add new option `SVG` to component `lazy-img`
+
 <a name="1.0.0-alpha.20"></a>
 # 1.0.0-alpha.20 (2019-07-13)
 

docs/docs/components/app-components-lazy-img/app-components-lazy-img.md

@@ -4,6 +4,8 @@ The "Lazy Image" component is a dead simple component to lazy load images.
 
 It leverages the IntersectionObserver API to lazy load images and also allows you to trigger "manually" their loading.
 
+An `<img/>` tag is per default use to display the image but optionally it could parse `SVG` too.
+
 ## Table of contents
 
 - [Usage](#app-components-lazy-img-usage)
@@ -38,6 +40,8 @@ This component offers the following options which could be set using attributes:
 | img-error-src | string |  | An optional image which could be displayed in case the main image would not be resolved |
 | img-sizes | string |  | The set of media conditions to indicates what image size would be best to choose |
 | img-alt | string |  | The image alternate text |
+| svg-src | string |  | The SVG image source (= URI) to lazy load and to parse (no `<img/>` tag will be use to render the svg) |
+| aria-label | string |  | If you are using the above SVG option, provide the accessibility information using this attribute |
 | observer-root-margin | string | 100px 0px | A string which specifies a set of offsets to add to the root's bounding_box when calculating intersections, effectively shrinking or growing the root for calculation purposes. [More info.](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver) |
 | observer-threshold | number or number[] |  | Either a single number or an array of numbers between 0.0 and 1.0, specifying a ratio of intersection area to total bounding box area for the observed target. [More info.](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver) |
 

docs/package-lock.json

@@ -1,14 +1,14 @@
 {
   "name": "deckdeckgo-docs",
-  "version": "1.0.0-alpha.19",
+  "version": "1.0.0-alpha.21",
   "description": "The Progressive Web App alternative for simple presentations",
   "license": "MIT",
   "files": [
     "dist/"
   ],
   "scripts": {
     "docs": "tsc --p ./scripts && node ./.deckgo/markdown-to-html",
-    "build": "npm run docs && stencil build --prerender",
+    "build": "npm run docs && stencil build",
     "start": "npm run docs && stencil build --dev --watch --serve",
     "test": "npm run docs && stencil test --spec --e2e",
     "test.watch": "npm run docs && stencil test --spec --e2e --watch"

docs/package.json

@@ -33,6 +33,7 @@ export class AppComponentsLazyImg {
         <main><h1 id="app-components-lazy-img-lazy-image">Lazy Image</h1>
 <p>The &quot;Lazy Image&quot; component is a dead simple component to lazy load images.</p>
 <p>It leverages the IntersectionObserver API to lazy load images and also allows you to trigger &quot;manually&quot; their loading.</p>
+<p>An <code>&lt;img/&gt;</code> tag is per default use to display the image but optionally it could parse <code>SVG</code> too.</p>
 <h2 id="app-components-lazy-img-table-of-contents">Table of contents</h2>
 <ul>
 <li><a href="#app-components-lazy-img-usage">Usage</a><ul>
@@ -93,6 +94,18 @@ export class AppComponentsLazyImg {
 <td>The image alternate text</td>
 </tr>
 <tr>
+<td>svg-src</td>
+<td>string</td>
+<td></td>
+<td>The SVG image source (= URI) to lazy load and to parse (no <code>&lt;img/&gt;</code> tag will be use to render the svg)</td>
+</tr>
+<tr>
+<td>aria-label</td>
+<td>string</td>
+<td></td>
+<td>If you are using the above SVG option, provide the accessibility information using this attribute</td>
+</tr>
+<tr>
 <td>observer-root-margin</td>
 <td>string</td>
 <td>100px 0px</td>