Skip to content
This repository has been archived by the owner on Oct 26, 2022. It is now read-only.

Commit

Permalink
Merge pull request #13 from tomik23:separate-svg
Browse files Browse the repository at this point in the history 
Separate svg
  • Loading branch information
@tomickigrzegorz
tomickigrzegorz authored Apr 23, 2021
2 parents b31a595 + b0720e2 commit 60ce7bf
Show file tree
Hide file tree
Showing 14 changed files with 1,270 additions and 1,282 deletions.
1 change: 1 addition & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
node_modules/
.vscode/
example.afdesign
*.map
82 changes: 33 additions & 49 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,81 +47,65 @@ yarn prod
// or
npm run prod
```

## Add a group of svg items
> the best place is right after opening the `<body>`
```svg
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="menu" viewBox="0 0 32 32">
<path d="M16 0c-8.836 0-16 7.164-16 ..."></path>
</symbol>
<symbol id="top" viewBox="0 0 24 24">
<path d="M7.406 15.422L6 14.016l6-6 ..."></path>
</symbol>
<symbol id="lightning" viewBox="0 0 32 32">
<path d="M29 0H3C1.35 0 0 1.35 0311 ..."></path>
</symbol>
<symbol id="wind" viewBox="0 0 32 32">
<path d="M32 7.075a12.941 12.941 20 ..."></path>
</symbol>
</svg>
```
## Configuration json

```js
const speedIcons = {
iconPlus: {
name: 'plus',
viebox: '0 0 20 20',
path: [
{
fill: 'red', // not required
d: 'M0 3h20v2h-20v-2zM0 ...'
}
],
symbol: 'menu',
color: '#1976d2', // not required
ariaLabel: 'show social buttons' // not required
},
iconTop: {
name: 'top',
viebox: '0 0 24 24',
path: [
{
fill: 'red', // not required
d: 'M7.406 15.422L6 ...'
}
],
symbol: 'top',
color: 'red', // not required
ariaLabel: 'scroll to top' // not required
},
iconsSmall: [
{
id: 1,
name: 'lightning',
viebox: '0 0 32 32',
url: 'https://url.com',
target: '_blank',
symbol: 'lightning',
url: 'https://url.com', // not required
target: '_blank', // not required
className: 'lightning', // not required
ariaLabel: 'open lightning', // not required
path: [
{
fill: 'black', // not required
d: 'M12 24l2 2-2 6 6-6-2-2 2-4-6 4zM32...'
},
{
d: 'M12 24l2 2-2 6 6-6-2-2 2-4-6 4zM32...'
},
]
},
{
id: 2,
name: 'wind',
viebox: '0 0 32 32',
symbol: 'wind',
className: 'wind', // not required
ariaLabel: 'open wind ;)', // not required
path: [
{
d : 'M26.938 12c-1.656 0-3 1.344-3 3 0...'
}
]
}
]
}
```

key | value | description
---- | ------- | -----------
id | number | This element is used to show the order of items with icons
name | string | The name that is used to show the tooltip on the hover event
viebox | string | Viewbox for svg
url | string | The Url specifies the link's destination, not required
target | string | _blank/_self/_parent/_top, not required
className | string | An additional class after which we can make events, not required
ariaLabel | string | An aria-label is added to button elements
path | array object | Path svg, can be an array of several paths, each track can also have a different color, just add fill: '#fff'
color | string | Color will be used for the main button or top button
key | type | require | description
---- | ------- | ----- | -----------
id | number | ✔ | This element is used to show the order of items with icons
symbol | string | ✔ | Symbol id name from svg
url | string | | The Url specifies the link's destination, not required
target | string | | _blank/_self/_parent/_top, not required
className | string | | An additional class after which we can make events, not required
ariaLabel | string | | An aria-label is added to button elements
color | string | | Color will be used for the main button or top button

## Sample configuration

Expand Down
71 changes: 35 additions & 36 deletions docs/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,72 +11,71 @@
</head>

<body>
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="menu" viewBox="0 0 32 32">
<path
d="M16 0c-8.836 0-16 7.164-16 16s7.164 16 16 16 16-7.164 16-16-7.164-16-16-16zM24 18h-6v6h-4v-6h-6v-4h6v-6h4v6h6v4z">
</path>
</symbol>
<symbol id="top" viewBox="0 0 24 24">
<path d="M7.406 15.422L6 14.016l6-6 6 6-1.406 1.406L12 10.828z"></path>
</symbol>
<symbol id="facebook" viewBox="0 0 32 32">
<path
d="M29 0H3C1.35 0 0 1.35 0 3v26c0 1.65 1.35 3 3 3h13V18h-4v-4h4v-2c0-3.306 2.694-6 6-6h4v4h-4c-1.1 0-2 .9-2 2v2h6l-1 4h-5v14h9c1.65 0 3-1.35 3-3V3c0-1.65-1.35-3-3-3z">
</path>
</symbol>
<symbol id="twitter" viewBox="0 0 32 32">
<path
d="M32 7.075a12.941 12.941 0 01-3.769 1.031 6.601 6.601 0 002.887-3.631 13.21 13.21 0 01-4.169 1.594A6.565 6.565 0 0022.155 4a6.563 6.563 0 00-6.563 6.563c0 .512.056 1.012.169 1.494A18.635 18.635 0 012.23 5.195a6.56 6.56 0 00-.887 3.3 6.557 6.557 0 002.919 5.463 6.565 6.565 0 01-2.975-.819v.081a6.565 6.565 0 005.269 6.437 6.574 6.574 0 01-2.968.112 6.588 6.588 0 006.131 4.563 13.17 13.17 0 01-9.725 2.719 18.568 18.568 0 0010.069 2.95c12.075 0 18.681-10.006 18.681-18.681 0-.287-.006-.569-.019-.85A13.216 13.216 0 0032 7.076z">
</path>
</symbol>
<symbol id="instagram" viewBox="0 0 32 32">
<path
d="M16 2.881c4.275 0 4.781.019 6.462.094 1.563.069 2.406.331 2.969.55a4.952 4.952 0 011.837 1.194 5.015 5.015 0 011.2 1.838c.219.563.481 1.412.55 2.969.075 1.688.094 2.194.094 6.463s-.019 4.781-.094 6.463c-.069 1.563-.331 2.406-.55 2.969a4.94 4.94 0 01-1.194 1.837 5.02 5.02 0 01-1.837 1.2c-.563.219-1.413.481-2.969.55-1.688.075-2.194.094-6.463.094s-4.781-.019-6.463-.094c-1.563-.069-2.406-.331-2.969-.55a4.952 4.952 0 01-1.838-1.194 5.02 5.02 0 01-1.2-1.837c-.219-.563-.481-1.413-.55-2.969-.075-1.688-.094-2.194-.094-6.463s.019-4.781.094-6.463c.069-1.563.331-2.406.55-2.969a4.964 4.964 0 011.194-1.838 5.015 5.015 0 011.838-1.2c.563-.219 1.412-.481 2.969-.55 1.681-.075 2.188-.094 6.463-.094zM16 0c-4.344 0-4.887.019-6.594.094-1.7.075-2.869.35-3.881.744-1.056.412-1.95.956-2.837 1.85a7.833 7.833 0 00-1.85 2.831C.444 6.538.169 7.7.094 9.4.019 11.113 0 11.656 0 16s.019 4.887.094 6.594c.075 1.7.35 2.869.744 3.881.413 1.056.956 1.95 1.85 2.837a7.82 7.82 0 002.831 1.844c1.019.394 2.181.669 3.881.744 1.706.075 2.25.094 6.594.094s4.888-.019 6.594-.094c1.7-.075 2.869-.35 3.881-.744 1.05-.406 1.944-.956 2.831-1.844s1.438-1.781 1.844-2.831c.394-1.019.669-2.181.744-3.881.075-1.706.094-2.25.094-6.594s-.019-4.887-.094-6.594c-.075-1.7-.35-2.869-.744-3.881a7.506 7.506 0 00-1.831-2.844A7.82 7.82 0 0026.482.843C25.463.449 24.301.174 22.601.099c-1.712-.081-2.256-.1-6.6-.1z">
</path>
<path
d="M16 7.781c-4.537 0-8.219 3.681-8.219 8.219s3.681 8.219 8.219 8.219 8.219-3.681 8.219-8.219A8.221 8.221 0 0016 7.781zm0 13.55a5.331 5.331 0 110-10.663 5.331 5.331 0 010 10.663zM26.462 7.456a1.919 1.919 0 11-3.838 0 1.919 1.919 0 013.838 0z">
</path>
</symbol>
</svg>
<div id="control" class="control"></div>
<script>
var speedIcons = {
iconBig: {
name: 'menu',
viebox: '0 0 32 32',
path: [{
fill: '#cacaca', // not required
d: 'M16 0c-8.836 0-16 7.164-16 16s7.164 16 16 16 16-7.164 16-16-7.164-16-16-16zM24 18h-6v6h-4v-6h-6v-4h6v-6h4v6h6v4z',
}],
// color: 'red', // not required
symbol: 'menu',
color: '#cacaca', // not required
ariaLabel: 'show social buttons' // not required
},
iconTop: {
name: 'top',
viebox: '0 0 24 24',
path: [{
fill: '#fff', // not required
d: 'M7.406 15.422L6 14.016l6-6 6 6-1.406 1.406L12 10.828z'
}],
symbol: 'top',
color: '#cacaca', // not required
ariaLabel: 'scroll to top' // not required
},
iconsSmall: [
{
id: 1,
name: 'facebook',
viebox: '0 0 32 32',
symbol: 'facebook',
url: 'https://www.facebook.com/', // not required
target: '_blank', // not required
className: 'facebook', // not required
ariaLabel: 'open facebook', // not required
path: [{
fill: 'black', // not required
d: 'M29 0H3C1.35 0 0 1.35 0 3v26c0 1.65 1.35 3 3 3h13V18h-4v-4h4v-2c0-3.306 2.694-6 6-6h4v4h-4c-1.1 0-2 .9-2 2v2h6l-1 4h-5v14h9c1.65 0 3-1.35 3-3V3c0-1.65-1.35-3-3-3z'
}]
},
{
id: 2,
name: 'twitter',
viebox: '0 0 32 32',
symbol: 'twitter',
url: 'https://twitter.com/home', // not required
target: '_blank', // not required
className: 'twitter', // not required
ariaLabel: 'open twitter', // not required
path: [{
fill: 'black', // not required
d: 'M32 7.075a12.941 12.941 0 01-3.769 1.031 6.601 6.601 0 002.887-3.631 13.21 13.21 0 01-4.169 1.594A6.565 6.565 0 0022.155 4a6.563 6.563 0 00-6.563 6.563c0 .512.056 1.012.169 1.494A18.635 18.635 0 012.23 5.195a6.56 6.56 0 00-.887 3.3 6.557 6.557 0 002.919 5.463 6.565 6.565 0 01-2.975-.819v.081a6.565 6.565 0 005.269 6.437 6.574 6.574 0 01-2.968.112 6.588 6.588 0 006.131 4.563 13.17 13.17 0 01-9.725 2.719 18.568 18.568 0 0010.069 2.95c12.075 0 18.681-10.006 18.681-18.681 0-.287-.006-.569-.019-.85A13.216 13.216 0 0032 7.076z'
}]
},
{
id: 3,
name: 'instagram',
viebox: '0 0 32 32',
symbol: 'instagram',
url: 'https://www.instagram.com/', // not required
target: '_blank', // not required
className: 'instagram', // not required
ariaLabel: 'open instagram', // not required
path: [{
fill: '#000', // not required
d: 'M16 2.881c4.275 0 4.781.019 6.462.094 1.563.069 2.406.331 2.969.55a4.952 4.952 0 011.837 1.194 5.015 5.015 0 011.2 1.838c.219.563.481 1.412.55 2.969.075 1.688.094 2.194.094 6.463s-.019 4.781-.094 6.463c-.069 1.563-.331 2.406-.55 2.969a4.94 4.94 0 01-1.194 1.837 5.02 5.02 0 01-1.837 1.2c-.563.219-1.413.481-2.969.55-1.688.075-2.194.094-6.463.094s-4.781-.019-6.463-.094c-1.563-.069-2.406-.331-2.969-.55a4.952 4.952 0 01-1.838-1.194 5.02 5.02 0 01-1.2-1.837c-.219-.563-.481-1.413-.55-2.969-.075-1.688-.094-2.194-.094-6.463s.019-4.781.094-6.463c.069-1.563.331-2.406.55-2.969a4.964 4.964 0 011.194-1.838 5.015 5.015 0 011.838-1.2c.563-.219 1.412-.481 2.969-.55 1.681-.075 2.188-.094 6.463-.094zM16 0c-4.344 0-4.887.019-6.594.094-1.7.075-2.869.35-3.881.744-1.056.412-1.95.956-2.837 1.85a7.833 7.833 0 00-1.85 2.831C.444 6.538.169 7.7.094 9.4.019 11.113 0 11.656 0 16s.019 4.887.094 6.594c.075 1.7.35 2.869.744 3.881.413 1.056.956 1.95 1.85 2.837a7.82 7.82 0 002.831 1.844c1.019.394 2.181.669 3.881.744 1.706.075 2.25.094 6.594.094s4.888-.019 6.594-.094c1.7-.075 2.869-.35 3.881-.744 1.05-.406 1.944-.956 2.831-1.844s1.438-1.781 1.844-2.831c.394-1.019.669-2.181.744-3.881.075-1.706.094-2.25.094-6.594s-.019-4.887-.094-6.594c-.075-1.7-.35-2.869-.744-3.881a7.506 7.506 0 00-1.831-2.844A7.82 7.82 0 0026.482.843C25.463.449 24.301.174 22.601.099c-1.712-.081-2.256-.1-6.6-.1z'
},
{
fill: '#000', // not required
d: 'M16 7.781c-4.537 0-8.219 3.681-8.219 8.219s3.681 8.219 8.219 8.219 8.219-3.681 8.219-8.219A8.221 8.221 0 0016 7.781zm0 13.55a5.331 5.331 0 110-10.663 5.331 5.331 0 010 10.663zM26.462 7.456a1.919 1.919 0 11-3.838 0 1.919 1.919 0 013.838 0z'
}]
}
]
};
Expand All @@ -87,7 +86,7 @@
// animation time for small buttons in ms
steps: 50,
// show button 'scroll-top' at 100px - not required
position: 100,
position: 400,
// show modal layer when hover on big button menu control
// the appearance of this layer in css #speed-dial-modal
modal: true,
Expand Down
2 changes: 1 addition & 1 deletion docs/speedDial.min.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading

0 comments on commit 60ce7bf

Please sign in to comment.