playbook_ui_docs 13.18.0.pre.alpha.play1141iconkitusinglibrary2210 → 13.18.0.pre.alpha.powercentrainplaybookpt22201
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: fd0fb443b85baf82b2303449ef7ae09e60de6f01df70772a4e27182558603114
|
4
|
+
data.tar.gz: d64335768d978c623fc8cd18dd1c4f201055e8cbbb58500e3b20bbad6accb6ff
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 9c217f014ad4e701cdbaf6996a102d6b909f8fd89cda6acc65513db103828936e179c4331c2d010f989af2771c00a6251da9b09ae6973362bb20ada03d0cd3a8
|
7
|
+
data.tar.gz: 6fa99eab8ade7061730870835c7470816bf5728249fb9f61b500b08afad74c3561ce24cd06c8fafb43e34ef8fdeb37031e88c912407d6843c91f0c35472e82ff
|
@@ -2,9 +2,15 @@
|
|
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",
|
5
|
+
<p><%= pb_rails("icon", props: { custom_icon: svg_url } ) %></p>
|
6
|
+
<p><%= pb_rails("icon", props: { rotation: 90, custom_icon: svg_url, size: "2x" } ) %></p>
|
7
|
+
<p><%= pb_rails("icon", props: { spin: true, custom_icon: svg_url, size: "3x" } ) %></p>
|
8
|
+
<p><%= pb_rails("icon", props: { size: "5x", custom_icon: svg_url } ) %></p>
|
9
|
+
<p><%= pb_rails("icon", props: { flip: "horizontal", size: "5x", custom_icon: svg_url } ) %></p>
|
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
|
+
} ) %>
|
10
16
|
</div>
|
@@ -1,59 +1,33 @@
|
|
1
1
|
import React from 'react'
|
2
2
|
import { Icon } from '../../'
|
3
3
|
|
4
|
+
// import Icons as config from 'power-icons'
|
4
5
|
const config = {
|
5
|
-
|
6
|
-
<svg
|
6
|
+
moon: (
|
7
|
+
<svg
|
8
|
+
ariaHidden="true"
|
9
|
+
focusable="false"
|
10
|
+
role="img"
|
11
|
+
viewBox="0 0 512 512"
|
7
12
|
xmlns="http://www.w3.org/2000/svg"
|
8
13
|
>
|
9
|
-
<
|
10
|
-
|
11
|
-
|
14
|
+
<path
|
15
|
+
d="M448 0H64C28.7 0 0 28.7 0 64v288c0 35.3 28.7 64 64 64h96v84c0 7.1 5.8 12 12 12 2.4 0 4.9-.7 7.1-2.4L304 416h144c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64zm16 352c0 8.8-7.2 16-16 16H288l-12.8 9.6L208 428v-60H64c-8.8 0-16-7.2-16-16V64c0-8.8 7.2-16 16-16h384c8.8 0 16 7.2 16 16v288zM336 184h-56v-56c0-8.8-7.2-16-16-16h-16c-8.8 0-16 7.2-16 16v56h-56c-8.8 0-16 7.2-16 16v16c0 8.8 7.2 16 16 16h56v56c0 8.8 7.2 16 16 16h16c8.8 0 16-7.2 16-16v-56h56c8.8 0 16-7.2 16-16v-16c0-8.8-7.2-16-16-16z"
|
16
|
+
fill="currentColor"
|
17
|
+
/>
|
12
18
|
</svg>
|
13
19
|
),
|
14
20
|
}
|
15
21
|
|
16
22
|
const IconCustom = (props) => {
|
17
23
|
return (
|
18
|
-
<
|
19
|
-
<
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
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>
|
24
|
+
<div>
|
25
|
+
<Icon
|
26
|
+
customIcon={config.moon}
|
27
|
+
size="7x"
|
28
|
+
{...props}
|
29
|
+
/>
|
30
|
+
</div>
|
57
31
|
)
|
58
32
|
}
|
59
33
|
|
@@ -4,12 +4,16 @@ 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
|
11
|
+
You must source *your own SVG into component/view* you are working on. This can easily be done in programmatic and maintainable ways.
|
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.
|
12
16
|
|
13
17
|
### Rails
|
14
18
|
|
15
|
-
|
19
|
+
Some Rails applications use only webpack(er) which means using `image_url` will be successful over `image_path` in most cases especially development where Webpack Dev Server is serving assets over HTTP. Rails applications still using Asset Pipeline may use `image_path` or `image_url`. Of course, YMMV depending on any custom configurations in your Rails application.
|