[vlc-devel] [PATCH 03/15] http: add assets
Loiret David
loiret.d at gmail.com
Tue Jun 23 16:18:35 CEST 2020
This aims to use SVGs as inline Vue components, for example, you can then
use the repeat icon in the following way: <svg-icon
name="repeat"></svg-icon>
Therefore, you can avoid manual duplication of SVGs in several templates.
Inline SVGs have several advantages such as customization via HTML
document’s stylesheets (hover effect, fill color, ...) and no additional
requests.
Le mar. 23 juin 2020 à 15:55, Marvin Scholz <epirat07 at gmail.com> a écrit :
> Whats the benefit of using these JS assets instead of plain
> old SVGs?
>
> On 23 Jun 2020, at 14:42, David Loiret wrote:
>
> > From: Gautam Chitnis <chitnis.gautam1 at gmail.com>
> >
> > ---
> > share/lua/http/src/assets/compiled-icons/delete.js | 10
> > ++++++++++
> > .../src/assets/compiled-icons/format-list-bulleted.js | 10
> > ++++++++++
> > share/lua/http/src/assets/compiled-icons/menu.js | 10
> > ++++++++++
> > .../src/assets/compiled-icons/play-circle-outline.js | 10
> > ++++++++++
> > share/lua/http/src/assets/compiled-icons/plus.js | 10
> > ++++++++++
> > share/lua/http/src/assets/compiled-icons/poll.js | 10
> > ++++++++++
> > share/lua/http/src/assets/compiled-icons/replay.js | 10
> > ++++++++++
> > .../http/src/assets/compiled-icons/shuffle-variant.js | 10
> > ++++++++++
> > share/lua/http/src/assets/icon-template.txt | 10
> > ++++++++++
> > share/lua/http/src/assets/svg-icons/delete.svg | 5 +++++
> > .../http/src/assets/svg-icons/format-list-bulleted.svg | 5 +++++
> > share/lua/http/src/assets/svg-icons/menu.svg | 5 +++++
> > .../http/src/assets/svg-icons/play-circle-outline.svg | 5 +++++
> > share/lua/http/src/assets/svg-icons/plus.svg | 5 +++++
> > share/lua/http/src/assets/svg-icons/poll.svg | 5 +++++
> > share/lua/http/src/assets/svg-icons/replay.svg | 5 +++++
> > .../lua/http/src/assets/svg-icons/shuffle-variant.svg | 5 +++++
> > 17 files changed, 130 insertions(+)
> > create mode 100644 share/lua/http/src/assets/compiled-icons/delete.js
> > create mode 100644
> > share/lua/http/src/assets/compiled-icons/format-list-bulleted.js
> > create mode 100644 share/lua/http/src/assets/compiled-icons/menu.js
> > create mode 100644
> > share/lua/http/src/assets/compiled-icons/play-circle-outline.js
> > create mode 100644 share/lua/http/src/assets/compiled-icons/plus.js
> > create mode 100644 share/lua/http/src/assets/compiled-icons/poll.js
> > create mode 100644 share/lua/http/src/assets/compiled-icons/replay.js
> > create mode 100644
> > share/lua/http/src/assets/compiled-icons/shuffle-variant.js
> > create mode 100644 share/lua/http/src/assets/icon-template.txt
> > create mode 100755 share/lua/http/src/assets/svg-icons/delete.svg
> > create mode 100755
> > share/lua/http/src/assets/svg-icons/format-list-bulleted.svg
> > create mode 100755 share/lua/http/src/assets/svg-icons/menu.svg
> > create mode 100755
> > share/lua/http/src/assets/svg-icons/play-circle-outline.svg
> > create mode 100755 share/lua/http/src/assets/svg-icons/plus.svg
> > create mode 100755 share/lua/http/src/assets/svg-icons/poll.svg
> > create mode 100755 share/lua/http/src/assets/svg-icons/replay.svg
> > create mode 100755
> > share/lua/http/src/assets/svg-icons/shuffle-variant.svg
> >
> > diff --git a/share/lua/http/src/assets/compiled-icons/delete.js
> > b/share/lua/http/src/assets/compiled-icons/delete.js
> > new file mode 100644
> > index 0000000000..9397c5b377
> > --- /dev/null
> > +++ b/share/lua/http/src/assets/compiled-icons/delete.js
> > @@ -0,0 +1,10 @@
> > +import { svgIcon } from
> > '../../components/svg-icon/svg-icon.component.js';
> > +
> > +svgIcon.register({
> > + 'delete': {
> > + width: 24,
> > + height: 24,
> > + viewBox: '0 0 24.00 24.00',
> > + data: `<path pid="0" d="M19 4h-3.5l-1-1h-5l-1 1H5v2h14M6 19c0
> > 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12z"/>`
> > + }
> > +})
> > diff --git
> > a/share/lua/http/src/assets/compiled-icons/format-list-bulleted.js
> > b/share/lua/http/src/assets/compiled-icons/format-list-bulleted.js
> > new file mode 100644
> > index 0000000000..17d2963263
> > --- /dev/null
> > +++ b/share/lua/http/src/assets/compiled-icons/format-list-bulleted.js
> > @@ -0,0 +1,10 @@
> > +import { svgIcon } from
> > '../../components/svg-icon/svg-icon.component.js';
> > +
> > +svgIcon.register({
> > + 'format-list-bulleted': {
> > + width: 24,
> > + height: 24,
> > + viewBox: '0 0 24.00 24.00',
> > + data: `<path pid="0" d="M7 5h14v2H7V5zm0 8v-2h14v2H7zM4 4.5c.83 0
> > 1.5.67 1.5 1.5S4.83 7.5 4 7.5 2.5 6.83 2.5 6 3.17 4.5 4 4.5zm0 6c.83 0
> > 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5-1.5-.67-1.5-1.5.67-1.5 1.5-1.5zM7
> > 19v-2h14v2H7zm-3-2.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5
> > 1.5-1.5-.67-1.5-1.5.67-1.5 1.5-1.5z"/>`
> > + }
> > +})
> > diff --git a/share/lua/http/src/assets/compiled-icons/menu.js
> > b/share/lua/http/src/assets/compiled-icons/menu.js
> > new file mode 100644
> > index 0000000000..a23bc36907
> > --- /dev/null
> > +++ b/share/lua/http/src/assets/compiled-icons/menu.js
> > @@ -0,0 +1,10 @@
> > +import { svgIcon } from
> > '../../components/svg-icon/svg-icon.component.js';
> > +
> > +svgIcon.register({
> > + 'menu': {
> > + width: 24,
> > + height: 24,
> > + viewBox: '0 0 24.00 24.00',
> > + data: `<path pid="0" d="M3 6h18v2H3V6zm0 5h18v2H3v-2zm0
> > 5h18v2H3v-2z"/>`
> > + }
> > +})
> > diff --git
> > a/share/lua/http/src/assets/compiled-icons/play-circle-outline.js
> > b/share/lua/http/src/assets/compiled-icons/play-circle-outline.js
> > new file mode 100644
> > index 0000000000..2a11c2e189
> > --- /dev/null
> > +++ b/share/lua/http/src/assets/compiled-icons/play-circle-outline.js
> > @@ -0,0 +1,10 @@
> > +import { svgIcon } from
> > '../../components/svg-icon/svg-icon.component.js';
> > +
> > +svgIcon.register({
> > + 'play-circle-outline': {
> > + width: 24,
> > + height: 24,
> > + viewBox: '0 0 24.00 24.00',
> > + data: `<path pid="0" d="M12 20c-4.411 0-8-3.589-8-8s3.589-8 8-8 8
> > 3.589 8 8-3.589 8-8 8zm0-18C6.477 2 2 6.477 2 12s4.477 10 10 10
> > 10-4.477 10-10S17.523 2 12 2zm-2 14.5l6-4.5-6-4.5v9z"/>`
> > + }
> > +})
> > diff --git a/share/lua/http/src/assets/compiled-icons/plus.js
> > b/share/lua/http/src/assets/compiled-icons/plus.js
> > new file mode 100644
> > index 0000000000..3292a53ad2
> > --- /dev/null
> > +++ b/share/lua/http/src/assets/compiled-icons/plus.js
> > @@ -0,0 +1,10 @@
> > +import { svgIcon } from
> > '../../components/svg-icon/svg-icon.component.js';
> > +
> > +svgIcon.register({
> > + 'plus': {
> > + width: 24,
> > + height: 24,
> > + viewBox: '0 0 24.00 24.00',
> > + data: `<path pid="0" d="M19
> > 12.998h-6v6h-2v-6H5v-2h6v-6h2v6h6v2z"/>`
> > + }
> > +})
> > diff --git a/share/lua/http/src/assets/compiled-icons/poll.js
> > b/share/lua/http/src/assets/compiled-icons/poll.js
> > new file mode 100644
> > index 0000000000..32dd4904bd
> > --- /dev/null
> > +++ b/share/lua/http/src/assets/compiled-icons/poll.js
> > @@ -0,0 +1,10 @@
> > +import { svgIcon } from
> > '../../components/svg-icon/svg-icon.component.js';
> > +
> > +svgIcon.register({
> > + 'poll': {
> > + width: 24,
> > + height: 24,
> > + viewBox: '0 0 24.00 24.00',
> > + data: `<path pid="0" d="M3 22V8h4v14H3zm7 0V2h4v20h-4zm7
> > 0v-8h4v8h-4z"/>`
> > + }
> > +})
> > diff --git a/share/lua/http/src/assets/compiled-icons/replay.js
> > b/share/lua/http/src/assets/compiled-icons/replay.js
> > new file mode 100644
> > index 0000000000..de2f695e9a
> > --- /dev/null
> > +++ b/share/lua/http/src/assets/compiled-icons/replay.js
> > @@ -0,0 +1,10 @@
> > +import { svgIcon } from
> > '../../components/svg-icon/svg-icon.component.js';
> > +
> > +svgIcon.register({
> > + 'replay': {
> > + width: 24,
> > + height: 24,
> > + viewBox: '0 0 24.00 24.00',
> > + data: `<path pid="0" d="M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69
> > 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z"/>`
> > + }
> > +})
> > diff --git
> > a/share/lua/http/src/assets/compiled-icons/shuffle-variant.js
> > b/share/lua/http/src/assets/compiled-icons/shuffle-variant.js
> > new file mode 100644
> > index 0000000000..b162e0de1e
> > --- /dev/null
> > +++ b/share/lua/http/src/assets/compiled-icons/shuffle-variant.js
> > @@ -0,0 +1,10 @@
> > +import { svgIcon } from
> > '../../components/svg-icon/svg-icon.component.js';
> > +
> > +svgIcon.register({
> > + 'shuffle-variant': {
> > + width: 24,
> > + height: 24,
> > + viewBox: '0 0 24.00 24.00',
> > + data: `<path pid="0" d="M17 3l5.25 4.5L17 12l5.25 4.5L17
> > 21v-3h-2.743l-2.818-2.818 2.122-2.121L15.5 15H17V9h-1.5l-9
> > 9H2v-3h3.257l9-9H17V3zM2 6h4.5l2.818 2.818-2.121 2.121L5.257
> > 9H2V6z"/>`
> > + }
> > +})
> > diff --git a/share/lua/http/src/assets/icon-template.txt
> > b/share/lua/http/src/assets/icon-template.txt
> > new file mode 100644
> > index 0000000000..51c9f4080b
> > --- /dev/null
> > +++ b/share/lua/http/src/assets/icon-template.txt
> > @@ -0,0 +1,10 @@
> > +import { svgIcon } from
> > '../../components/svg-icon/svg-icon.component.js';
> > +
> > +svgIcon.register({
> > + '${name}': {
> > + width: ${width},
> > + height: ${height},
> > + viewBox: ${viewBox},
> > + data: `${data}`
> > + }
> > +})
> > diff --git a/share/lua/http/src/assets/svg-icons/delete.svg
> > b/share/lua/http/src/assets/svg-icons/delete.svg
> > new file mode 100755
> > index 0000000000..7cf0664b83
> > --- /dev/null
> > +++ b/share/lua/http/src/assets/svg-icons/delete.svg
> > @@ -0,0 +1,5 @@
> > +<?xml version="1.0" encoding="utf-8"?>
> > +<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
> > "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
> > +<svg xmlns="http://www.w3.org/2000/svg"
> > xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
> > baseProfile="full" width="24" height="24" viewBox="0 0 24.00 24.00"
> > enable-background="new 0 0 24.00 24.00" xml:space="preserve">
> > + <path fill="#000000" fill-opacity="1" stroke-linejoin="round" d="M
> > 19,4L 15.5,4L 14.5,3L 9.5,3L 8.5,4L 5,4L 5,6L 19,6M 6,19C 6,20.1
> > 6.9,21 8,21L 16,21C 17.1,21 18,20.1 18,19L 18,7L 6,7L 6,19 Z "/>
> > +</svg>
> > diff --git
> > a/share/lua/http/src/assets/svg-icons/format-list-bulleted.svg
> > b/share/lua/http/src/assets/svg-icons/format-list-bulleted.svg
> > new file mode 100755
> > index 0000000000..b729edfb54
> > --- /dev/null
> > +++ b/share/lua/http/src/assets/svg-icons/format-list-bulleted.svg
> > @@ -0,0 +1,5 @@
> > +<?xml version="1.0" encoding="utf-8"?>
> > +<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
> > "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
> > +<svg xmlns="http://www.w3.org/2000/svg"
> > xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
> > baseProfile="full" width="24" height="24" viewBox="0 0 24.00 24.00"
> > enable-background="new 0 0 24.00 24.00" xml:space="preserve">
> > + <path fill="#000000" fill-opacity="1" stroke-width="0.2"
> > stroke-linejoin="round" d="M 7,5L 21,5L 21,7L 7,7L 7,5 Z M 7,13L 7,11L
> > 21,11L 21,13L 7,13 Z M 4,4.50001C 4.83,4.50001 5.5,5.16993
> > 5.5,6.00001C 5.5,6.83008 4.83,7.50001 4,7.50001C 3.17,7.50001
> > 2.5,6.83008 2.5,6.00001C 2.5,5.16993 3.17,4.50001 4,4.50001 Z M
> > 4,10.5C 4.83,10.5 5.5,11.17 5.5,12C 5.5,12.83 4.83,13.5 4,13.5C
> > 3.17,13.5 2.5,12.83 2.5,12C 2.5,11.17 3.17,10.5 4,10.5 Z M 7,19L 7,17L
> > 21,17L 21,19L 7,19 Z M 4,16.5C 4.83,16.5 5.5,17.17 5.5,18C 5.5,18.83
> > 4.83,19.5 4,19.5C 3.17,19.5 2.5,18.83 2.5,18C 2.5,17.17 3.17,16.5
> > 4,16.5 Z "/>
> > +</svg>
> > diff --git a/share/lua/http/src/assets/svg-icons/menu.svg
> > b/share/lua/http/src/assets/svg-icons/menu.svg
> > new file mode 100755
> > index 0000000000..ee1963955b
> > --- /dev/null
> > +++ b/share/lua/http/src/assets/svg-icons/menu.svg
> > @@ -0,0 +1,5 @@
> > +<?xml version="1.0" encoding="utf-8"?>
> > +<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
> > "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
> > +<svg xmlns="http://www.w3.org/2000/svg"
> > xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
> > baseProfile="full" width="24" height="24" viewBox="0 0 24.00 24.00"
> > enable-background="new 0 0 24.00 24.00" xml:space="preserve">
> > + <path fill="#000000" fill-opacity="1" stroke-width="0.2"
> > stroke-linejoin="round" d="M 3,6L 21,6L 21,8L 3,8L 3,6 Z M 3,11L
> > 21,11L 21,13L 3,13L 3,11 Z M 3,16L 21,16L 21,18L 3,18L 3,16 Z "/>
> > +</svg>
> > diff --git
> > a/share/lua/http/src/assets/svg-icons/play-circle-outline.svg
> > b/share/lua/http/src/assets/svg-icons/play-circle-outline.svg
> > new file mode 100755
> > index 0000000000..ab592415b8
> > --- /dev/null
> > +++ b/share/lua/http/src/assets/svg-icons/play-circle-outline.svg
> > @@ -0,0 +1,5 @@
> > +<?xml version="1.0" encoding="utf-8"?>
> > +<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
> > "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
> > +<svg xmlns="http://www.w3.org/2000/svg"
> > xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
> > baseProfile="full" width="24" height="24" viewBox="0 0 24.00 24.00"
> > enable-background="new 0 0 24.00 24.00" xml:space="preserve">
> > + <path fill="#000000" fill-opacity="1" stroke-width="0.2"
> > stroke-linejoin="round" d="M 12,20C 7.589,20 4.00001,16.411
> > 4.00001,12C 4.00001,7.589 7.589,4.00001 12,4.00001C 16.411,4.00001
> > 20,7.589 20,12C 20,16.411 16.411,20 12,20 Z M 12,2.00001C
> > 6.477,2.00001 2.00001,6.477 2.00001,12C 2.00001,17.523 6.477,22 12,22C
> > 17.523,22 22,17.523 22,12C 22,6.477 17.523,2.00001 12,2.00001 Z M
> > 10,16.5L 16,12L 10,7.50001L 10,16.5 Z "/>
> > +</svg>
> > diff --git a/share/lua/http/src/assets/svg-icons/plus.svg
> > b/share/lua/http/src/assets/svg-icons/plus.svg
> > new file mode 100755
> > index 0000000000..731cc9d6d7
> > --- /dev/null
> > +++ b/share/lua/http/src/assets/svg-icons/plus.svg
> > @@ -0,0 +1,5 @@
> > +<?xml version="1.0" encoding="utf-8"?>
> > +<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
> > "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
> > +<svg xmlns="http://www.w3.org/2000/svg"
> > xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
> > baseProfile="full" width="24" height="24" viewBox="0 0 24.00 24.00"
> > enable-background="new 0 0 24.00 24.00" xml:space="preserve">
> > + <path fill="#000000" fill-opacity="1" stroke-width="0.2"
> > stroke-linejoin="round" d="M 18.9994,12.998L 12.9994,12.998L
> > 12.9994,18.998L 10.9994,18.998L 10.9994,12.998L 4.99936,12.998L
> > 4.99936,10.998L 10.9994,10.998L 10.9994,4.99805L 12.9994,4.99805L
> > 12.9994,10.998L 18.9994,10.998L 18.9994,12.998 Z "/>
> > +</svg>
> > diff --git a/share/lua/http/src/assets/svg-icons/poll.svg
> > b/share/lua/http/src/assets/svg-icons/poll.svg
> > new file mode 100755
> > index 0000000000..7947df0aa8
> > --- /dev/null
> > +++ b/share/lua/http/src/assets/svg-icons/poll.svg
> > @@ -0,0 +1,5 @@
> > +<?xml version="1.0" encoding="utf-8"?>
> > +<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
> > "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
> > +<svg xmlns="http://www.w3.org/2000/svg"
> > xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
> > baseProfile="full" width="24" height="24" viewBox="0 0 24.00 24.00"
> > enable-background="new 0 0 24.00 24.00" xml:space="preserve">
> > + <path fill="#000000" fill-opacity="1" stroke-width="0.2"
> > stroke-linejoin="round" d="M 3,22L 3,8L 7,8L 7,22L 3,22 Z M
> > 9.99999,22L 9.99999,2.00001L 14,2.00001L 14,22L 9.99999,22 Z M 17,22L
> > 17,14L 21,14L 21,22L 17,22 Z "/>
> > +</svg>
> > diff --git a/share/lua/http/src/assets/svg-icons/replay.svg
> > b/share/lua/http/src/assets/svg-icons/replay.svg
> > new file mode 100755
> > index 0000000000..9dc06a177a
> > --- /dev/null
> > +++ b/share/lua/http/src/assets/svg-icons/replay.svg
> > @@ -0,0 +1,5 @@
> > +<?xml version="1.0" encoding="utf-8"?>
> > +<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
> > "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
> > +<svg xmlns="http://www.w3.org/2000/svg"
> > xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
> > baseProfile="full" width="24" height="24" viewBox="0 0 24.00 24.00"
> > enable-background="new 0 0 24.00 24.00" xml:space="preserve">
> > + <path fill="#000000" fill-opacity="1" stroke-linejoin="round" d="M
> > 12,5L 12,1L 7,6L 12,11L 12,7C 15.31,7 18,9.69 18,13C 18,16.31 15.31,19
> > 12,19C 8.69,19 6,16.31 6,13L 4,13C 4,17.42 7.58,21 12,21C 16.42,21
> > 20,17.42 20,13C 20,8.58 16.42,5 12,5 Z "/>
> > +</svg>
> > diff --git a/share/lua/http/src/assets/svg-icons/shuffle-variant.svg
> > b/share/lua/http/src/assets/svg-icons/shuffle-variant.svg
> > new file mode 100755
> > index 0000000000..4edc225df3
> > --- /dev/null
> > +++ b/share/lua/http/src/assets/svg-icons/shuffle-variant.svg
> > @@ -0,0 +1,5 @@
> > +<?xml version="1.0" encoding="utf-8"?>
> > +<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
> > "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
> > +<svg xmlns="http://www.w3.org/2000/svg"
> > xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
> > baseProfile="full" width="24" height="24" viewBox="0 0 24.00 24.00"
> > enable-background="new 0 0 24.00 24.00" xml:space="preserve">
> > + <path fill="#000000" fill-opacity="1" stroke-linejoin="round" d="M
> > 17,3L 22.25,7.50002L 17,12L 22.25,16.5L 17,21L 17,18L 14.2574,18L
> > 11.4393,15.182L 13.5607,13.0607L 15.5,15L 17,15L 17,12L 17,9L 15.5,9L
> > 6.49999,18L 2,18L 2,15L 5.25736,15L 14.2574,6L 17,6L 17,3 Z M
> > 2,6.00001L 6.5,6.00001L 9.31802,8.81803L 7.1967,10.9393L
> > 5.25737,9.00001L 2,9.00001L 2,6.00001 Z "/>
> > +</svg>
> > --
> > 2.18.0
> >
> > _______________________________________________
> > vlc-devel mailing list
> > To unsubscribe or modify your subscription options:
> > https://mailman.videolan.org/listinfo/vlc-devel
> _______________________________________________
> vlc-devel mailing list
> To unsubscribe or modify your subscription options:
> https://mailman.videolan.org/listinfo/vlc-devel
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://mailman.videolan.org/pipermail/vlc-devel/attachments/20200623/b0609a44/attachment.html>
More information about the vlc-devel
mailing list