12.9.1
An icon is a graphic symbol that represents an object (ie a file) or a function. They can be used to give the user feedback.
<%= pb_rails("icon", props: { icon: "user", fixed_width: true, rotation: 90, size: "2x" }) %> <%= pb_rails("icon", props: { icon: "user", fixed_width: true, rotation: 180, size: "2x" }) %> <%= pb_rails("icon", props: { icon: "user", fixed_width: true, rotation: 270, size: "2x" }) %>
<%= pb_rails("icon", props: { icon: "question-circle", fixed_width: true, flip: "horizontal", size: "2x" }) %> <%= pb_rails("icon", props: { icon: "question-circle", fixed_width: true, flip: "vertical", size: "2x" }) %> <%= pb_rails("icon", props: { icon: "question-circle", fixed_width: true, flip: "both", size: "2x" }) %>
Spin
Pulse
A spinner icon can show a user that something is loading or saving.
<p><%= pb_rails("icon", props: { icon: "spinner", spin: true, fixed_width: true, size: "2x" }) %> <span>Spin</span></p> <br/> <p><%= pb_rails("icon", props: { icon: "spinner", pulse: true, fixed_width: true, size: "2x" }) %> <span>Pulse</span></p>
Icon Pull can be used to indicate that the user can perform a pull action.
<%= pb_rails("icon", props: { icon: "arrow-left", pull: "left", fixed_width: true, size: "2x" }) %> <%= pb_rails("icon", props: { icon: "arrow-right", pull: "right", fixed_width: true, size: "2x" }) %>
<%= pb_rails("icon", props: { icon: "user", border: true, fixed_width: true, size: "2x" }) %>
Large
Small
XSmall
1x
2x
3x
4x
5x
6x
7x
8x
9x
10x
<p><%= pb_rails("icon", props: { icon: "user", size: "lg" }) %> <span>Large</span></p> <p><%= pb_rails("icon", props: { icon: "user", size: "sm" }) %> <span>Small</span></p> <p><%= pb_rails("icon", props: { icon: "user", size: "xs" }) %> <span>XSmall</span></p> <br/><br/> <p><%= pb_rails("icon", props: { icon: "user", size: "1x" }) %> <span>1x</span></p> <p><%= pb_rails("icon", props: { icon: "user", size: "2x" }) %> <span>2x</span></p> <p><%= pb_rails("icon", props: { icon: "user", size: "3x" }) %> <span>3x</span></p> <p><%= pb_rails("icon", props: { icon: "user", size: "4x" }) %> <span>4x</span></p> <p><%= pb_rails("icon", props: { icon: "user", size: "5x" }) %> <span>5x</span></p> <p><%= pb_rails("icon", props: { icon: "user", size: "6x" }) %> <span>6x</span></p> <p><%= pb_rails("icon", props: { icon: "user", size: "7x" }) %> <span>7x</span></p> <p><%= pb_rails("icon", props: { icon: "user", size: "8x" }) %> <span>8x</span></p> <p><%= pb_rails("icon", props: { icon: "user", size: "9x" }) %> <span>9x</span></p> <p><%= pb_rails("icon", props: { icon: "user", size: "10x" }) %> <span>10x</span></p>
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. xmlns:xlink should be xmlnsXlink and so on. There should be no hyphenated attributes and no semi-colons!.
Fill colors with regards to g or path nodes, e.g. fill="black", should be replaced with currentColor ala fill="currentColor". 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 component/view you are working on. This can easily be done in programmatic and maintainable ways.
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.
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.
<%# SVG fill color inherited from css color property %> <div class="icon-wrapper"> <% svg_url = "https://upload.wikimedia.org/wikipedia/commons/3/3b/Wrench_font_awesome.svg" %> <p><%= pb_rails("icon", props: { custom_icon: svg_url } ) %></p> <p><%= pb_rails("icon", props: { rotation: 90, custom_icon: svg_url, size: "2x" } ) %></p> <p><%= pb_rails("icon", props: { spin: true, custom_icon: svg_url, size: "3x" } ) %></p> <p><%= pb_rails("icon", props: { size: "5x", custom_icon: svg_url } ) %></p> <p><%= pb_rails("icon", props: { flip: "horizontal", size: "5x", custom_icon: svg_url } ) %></p> <%= pb_rails("body", props: { text: "Custom icons are compatible with other icon props (size, rotation, spin, flip, etc). Their SVG fill colors will be inherited from parent element's css color properties." } ) %> </div>
Be careful of use cases where there should be a clickable area around the icon. Icon Circle Button may need to be used instead.