playbook_ui_docs 13.18.0.pre.alpha.dependabotnpmandyarntypescripteslintparser56202194 → 13.18.0.pre.alpha.play1141iconkitusinglibrary2210
Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 6d451e97cae3631f4ce6c8a41ca556d2db6bfca7cd0370c218d430da34ea886e
|
|
4
|
+
data.tar.gz: af7f36b4c3491c097ff0e8a828470bb6ea539bd9b260414689755f43699500e7
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 0c80a0f761eb1b92b0a434cde90ca1670665121cb4c4b5d8a71025bae004f88fe814d7fdd17ab3e55218ff8a9e577cd24fcd411fce57ab2abdc2e7aec5a5c2a0
|
|
7
|
+
data.tar.gz: 243dac9ebb7a15db43d65d4a6ceec400216f0c6eaa1e07f55ea127193d1c2b80c72ec3e84e6714d043ee60f22aebbd7a351cdd7d5d736ab76f31209a04b4b5fd
|
|
@@ -2,15 +2,9 @@
|
|
|
2
2
|
<div class="icon-wrapper">
|
|
3
3
|
|
|
4
4
|
<% svg_url = "https://upload.wikimedia.org/wikipedia/commons/3/3b/Wrench_font_awesome.svg" %>
|
|
5
|
-
<p><%= pb_rails("icon", props: {
|
|
6
|
-
<p><%= pb_rails("icon", props: { rotation: 90,
|
|
7
|
-
<p><%= pb_rails("icon", props: { spin: true,
|
|
8
|
-
<p><%= pb_rails("icon", props: { size: "5x",
|
|
9
|
-
<p><%= pb_rails("icon", props: { flip: "horizontal", size: "5x",
|
|
10
|
-
|
|
11
|
-
<%= pb_rails("body", props: {
|
|
12
|
-
text: "Custom icons are compatible with other icon props (size, rotation,
|
|
13
|
-
spin, flip, etc). Their SVG fill colors will be inherited from
|
|
14
|
-
parent element's css color properties."
|
|
15
|
-
} ) %>
|
|
5
|
+
<p><%= pb_rails("icon", props: { icon: svg_url } ) %></p>
|
|
6
|
+
<p><%= pb_rails("icon", props: { rotation: 90, icon: svg_url, size: "2x" } ) %></p>
|
|
7
|
+
<p><%= pb_rails("icon", props: { spin: true, icon: svg_url, size: "3x" } ) %></p>
|
|
8
|
+
<p><%= pb_rails("icon", props: { size: "5x", icon: svg_url } ) %></p>
|
|
9
|
+
<p><%= pb_rails("icon", props: { flip: "horizontal", size: "5x", icon: svg_url } ) %></p>
|
|
16
10
|
</div>
|
|
@@ -1,33 +1,59 @@
|
|
|
1
1
|
import React from 'react'
|
|
2
2
|
import { Icon } from '../../'
|
|
3
3
|
|
|
4
|
-
// import Icons as config from 'power-icons'
|
|
5
4
|
const config = {
|
|
6
|
-
|
|
7
|
-
<svg
|
|
8
|
-
ariaHidden="true"
|
|
9
|
-
focusable="false"
|
|
10
|
-
role="img"
|
|
11
|
-
viewBox="0 0 512 512"
|
|
5
|
+
icon: (
|
|
6
|
+
<svg viewBox="0 -256 1792 1792"
|
|
12
7
|
xmlns="http://www.w3.org/2000/svg"
|
|
13
8
|
>
|
|
14
|
-
<
|
|
15
|
-
d="
|
|
16
|
-
|
|
17
|
-
/>
|
|
9
|
+
<g transform="matrix(1,0,0,-1,53.152542,1217.0847)">
|
|
10
|
+
<path d="m 384,64 q 0,26 -19,45 -19,19 -45,19 -26,0 -45,-19 -19,-19 -19,-45 0,-26 19,-45 19,-19 45,-19 26,0 45,19 19,19 19,45 z m 644,420 -682,-682 q -37,-37 -90,-37 -52,0 -91,37 L 59,-90 Q 21,-54 21,0 21,53 59,91 L 740,772 Q 779,674 854.5,598.5 930,523 1028,484 z m 634,435 q 0,-39 -23,-106 Q 1592,679 1474.5,595.5 1357,512 1216,512 1031,512 899.5,643.5 768,775 768,960 q 0,185 131.5,316.5 131.5,131.5 316.5,131.5 58,0 121.5,-16.5 63.5,-16.5 107.5,-46.5 16,-11 16,-28 0,-17 -16,-28 L 1152,1120 V 896 l 193,-107 q 5,3 79,48.5 74,45.5 135.5,81 61.5,35.5 70.5,35.5 15,0 23.5,-10 8.5,-10 8.5,-25 z" />
|
|
11
|
+
</g>
|
|
18
12
|
</svg>
|
|
19
13
|
),
|
|
20
14
|
}
|
|
21
15
|
|
|
22
16
|
const IconCustom = (props) => {
|
|
23
17
|
return (
|
|
24
|
-
<
|
|
25
|
-
<
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
18
|
+
<React.Fragment>
|
|
19
|
+
<p>
|
|
20
|
+
<Icon
|
|
21
|
+
icon={config.icon}
|
|
22
|
+
{...props}
|
|
23
|
+
/>
|
|
24
|
+
</p>
|
|
25
|
+
<p>
|
|
26
|
+
<Icon
|
|
27
|
+
icon={config.icon}
|
|
28
|
+
rotation={90}
|
|
29
|
+
size="2x"
|
|
30
|
+
{...props}
|
|
31
|
+
/>
|
|
32
|
+
</p>
|
|
33
|
+
<p>
|
|
34
|
+
<Icon
|
|
35
|
+
icon={config.icon}
|
|
36
|
+
size="3x"
|
|
37
|
+
spin
|
|
38
|
+
{...props}
|
|
39
|
+
/>
|
|
40
|
+
</p>
|
|
41
|
+
<p>
|
|
42
|
+
<Icon
|
|
43
|
+
icon={config.icon}
|
|
44
|
+
size="5x"
|
|
45
|
+
{...props}
|
|
46
|
+
/>
|
|
47
|
+
</p>
|
|
48
|
+
<p>
|
|
49
|
+
<Icon
|
|
50
|
+
flip="horizontal"
|
|
51
|
+
icon={config.icon}
|
|
52
|
+
size="5x"
|
|
53
|
+
{...props}
|
|
54
|
+
/>
|
|
55
|
+
</p>
|
|
56
|
+
</React.Fragment>
|
|
31
57
|
)
|
|
32
58
|
}
|
|
33
59
|
|
|
@@ -4,16 +4,12 @@ When using custom icons it is important to introduce a "clean" SVG. In order to
|
|
|
4
4
|
|
|
5
5
|
Attributes must be React compatible e.g. <code>xmlns:xlink</code> should be <code>xmlnsXlink</code> and so on. <strong>There should be no hyphenated attributes and no semi-colons!.</strong>
|
|
6
6
|
|
|
7
|
-
Fill colors with regards to <code>g</code> or <code>path</code> nodes, e.g. <code>fill="black"</code>, should be replaced with
|
|
7
|
+
Fill colors with regards to <code>g</code> or <code>path</code> nodes, e.g. <code>fill="black"</code>, should be replaced with <code>currentColor</code> ala <code>fill="currentColor"</code>. Your mileage may vary depending on the complexity of your SVG.
|
|
8
8
|
|
|
9
|
-
Pay attention to your custom icon's dimensions and `viewBox` attribute. It is best to use a `viewBox="0 0 512 512"` starting point
|
|
9
|
+
Pay attention to your custom icon's dimensions and `viewBox` attribute. It is best to use a `viewBox="0 0 512 512"` starting point **when designing instead of trying to retrofit the viewbox afterwards**!
|
|
10
10
|
|
|
11
|
-
You must source
|
|
12
|
-
|
|
13
|
-
### React
|
|
14
|
-
|
|
15
|
-
So long as you have a valid React `<SVG>` node, you can send it as the `customIcon` prop and the kit will take care of the rest.
|
|
11
|
+
You must source _your own SVG into component/view_ you are working on. This can easily be done in programmatic and maintainable ways.
|
|
16
12
|
|
|
17
13
|
### Rails
|
|
18
14
|
|
|
19
|
-
|
|
15
|
+
Sending the absolute path to the `icon` prop results in an `<SVG>` tag within the working view.
|