Sha256: 3dcdc9653da5841f3403a28863e6fc12841746f1ab498ed338f11b2307bbaa9b

Contents?: true

Size: 1.18 KB

Versions: 10

Compression:

Stored size: 1.18 KB

Contents

### Experimental: Not currently available in the Rails version!

When using custom icons it is important to introduce a "clean" SVG. In order to ensure these custom icons perform as intended within your kit(s), ensure these things have been modified from the original SVG markup:

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>

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.

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__!

You must source *your own SVG into the React component/view* you are working in. This can easily be done in a programmatic and maintainable way. 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.

Version data entries

10 entries across 10 versions & 1 rubygems

Version Path
playbook_ui-10.5.0 app/pb_kits/playbook/pb_icon/docs/_icon_custom.md
playbook_ui-10.4.0 app/pb_kits/playbook/pb_icon/docs/_icon_custom.md
playbook_ui-10.3.0 app/pb_kits/playbook/pb_icon/docs/_icon_custom.md
playbook_ui-10.2.1.alpha.sisensefix app/pb_kits/playbook/pb_icon/docs/_icon_custom.md
playbook_ui-10.2.1 app/pb_kits/playbook/pb_icon/docs/_icon_custom.md
playbook_ui-10.2.0 app/pb_kits/playbook/pb_icon/docs/_icon_custom.md
playbook_ui-10.1.0 app/pb_kits/playbook/pb_icon/docs/_icon_custom.md
playbook_ui-10.0.3.pre.alpha.walkthrough2 app/pb_kits/playbook/pb_icon/docs/_icon_custom.md
playbook_ui-10.0.3.pre.alpha.walkthrough app/pb_kits/playbook/pb_icon/docs/_icon_custom.md
playbook_ui-10.0.2.pre.alpha.pre.iconfix app/pb_kits/playbook/pb_icon/docs/_icon_custom.md