forked from callstack/react-native-paper
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathicons.html
82 lines (82 loc) · 22.3 KB
/
icons.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<html lang="en" data-reactroot=""><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"/><meta name="mobile-web-app-capable" content="yes"/><meta name="apple-mobile-web-app-capable" content="yes"/><meta name="description" content=""/><meta name="twitter:card" content="summary"/><meta name="twitter:title" content="Icons"/><meta name="twitter:description" content=""/><meta property="og:type" content="website"/><meta property="og:title" content="Icons"/><meta property="og:description" content=""/><title>Icons</title><link type="text/css" rel="stylesheet" href="app.css"/></head><body><div id='root'><div class="_wrapper__1nbmuhq" data-reactroot=""><aside class="_sidebar__1gt5k1p"><input type="checkbox" class="_menuButton__1gt5k1p" id="slide-sidebar" role="button"/><label class="_menuIcon__1gt5k1p" for="slide-sidebar">☰</label><div class="_menu__1gt5k1p"><input type="search" value="" placeholder="Filter…" class="_searchbar__1gt5k1p"/><nav class="_navigation__1gt5k1p"><a class="_link__1gt5k1p" href="index.html">Home</a><a class="_link__1gt5k1p" href="showcase.html">Showcase</a><a class="_link__1gt5k1p" href="getting-started.html">Getting Started</a><a class="_link__1gt5k1p" href="theming.html">Theming</a><a class="_link__1gt5k1p _active__1gt5k1p" href="icons.html">Icons</a><a class="_link__1gt5k1p" href="contributing.html">Contributing</a><hr class="_separator__1gt5k1p"/><div><div class="_row__1gt5k1p"><a class="_link__1gt5k1p" href="appbar.html">Appbar</a><button class="_buttonIcon__1gt5k1p _expandedIcon__1gt5k1p" style="opacity:0"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div class="_sectionItems__1gt5k1p _sectionItemsVisible__1gt5k1p"><a class="_link__1gt5k1p" href="appbar-action.html">Appbar.Action</a><a class="_link__1gt5k1p" href="appbar-back-action.html">Appbar.BackAction</a><a class="_link__1gt5k1p" href="appbar-content.html">Appbar.Content</a><a class="_link__1gt5k1p" href="appbar-header.html">Appbar.Header</a></div></div><a class="_link__1gt5k1p" href="banner.html">Banner</a><a class="_link__1gt5k1p" href="bottom-navigation.html">BottomNavigation</a><a class="_link__1gt5k1p" href="button.html">Button</a><a class="_link__1gt5k1p" href="caption.html">Caption</a><div><div class="_row__1gt5k1p"><a class="_link__1gt5k1p" href="card.html">Card</a><button class="_buttonIcon__1gt5k1p _expandedIcon__1gt5k1p" style="opacity:0"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div class="_sectionItems__1gt5k1p _sectionItemsVisible__1gt5k1p"><a class="_link__1gt5k1p" href="card-actions.html">Card.Actions</a><a class="_link__1gt5k1p" href="card-content.html">Card.Content</a><a class="_link__1gt5k1p" href="card-cover.html">Card.Cover</a></div></div><div><div class="_row__1gt5k1p"><a class="_link__1gt5k1p" href="checkbox.html">Checkbox</a><button class="_buttonIcon__1gt5k1p _expandedIcon__1gt5k1p" style="opacity:0"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div class="_sectionItems__1gt5k1p _sectionItemsVisible__1gt5k1p"><a class="_link__1gt5k1p" href="checkbox-android.html">Checkbox.Android</a><a class="_link__1gt5k1p" href="checkbox-ios.html">Checkbox.IOS</a></div></div><a class="_link__1gt5k1p" href="chip.html">Chip</a><div><div class="_row__1gt5k1p"><a class="_link__1gt5k1p" href="data-table.html">DataTable</a><button class="_buttonIcon__1gt5k1p _expandedIcon__1gt5k1p" style="opacity:0"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div class="_sectionItems__1gt5k1p _sectionItemsVisible__1gt5k1p"><a class="_link__1gt5k1p" href="data-table-cell.html">DataTable.Cell</a><a class="_link__1gt5k1p" href="data-table-header.html">DataTable.Header</a><a class="_link__1gt5k1p" href="data-table-pagination.html">DataTable.Pagination</a><a class="_link__1gt5k1p" href="data-table-row.html">DataTable.Row</a><a class="_link__1gt5k1p" href="data-table-title.html">DataTable.Title</a></div></div><div><div class="_row__1gt5k1p"><a class="_link__1gt5k1p" href="dialog.html">Dialog</a><button class="_buttonIcon__1gt5k1p _expandedIcon__1gt5k1p" style="opacity:0"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div class="_sectionItems__1gt5k1p _sectionItemsVisible__1gt5k1p"><a class="_link__1gt5k1p" href="dialog-actions.html">Dialog.Actions</a><a class="_link__1gt5k1p" href="dialog-content.html">Dialog.Content</a><a class="_link__1gt5k1p" href="dialog-scroll-area.html">Dialog.ScrollArea</a><a class="_link__1gt5k1p" href="dialog-title.html">Dialog.Title</a></div></div><a class="_link__1gt5k1p" href="divider.html">Divider</a><div><div class="_row__1gt5k1p"><a class="_link__1gt5k1p" href="">Drawer</a><button class="_buttonIcon__1gt5k1p _expandedIcon__1gt5k1p" style="opacity:0"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div class="_sectionItems__1gt5k1p _sectionItemsVisible__1gt5k1p"><a class="_link__1gt5k1p" href="drawer-item.html">Drawer.Item</a><a class="_link__1gt5k1p" href="drawer-section.html">Drawer.Section</a></div></div><div><div class="_row__1gt5k1p"><a class="_link__1gt5k1p" href="fab.html">FAB</a><button class="_buttonIcon__1gt5k1p _expandedIcon__1gt5k1p" style="opacity:0"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div class="_sectionItems__1gt5k1p _sectionItemsVisible__1gt5k1p"><a class="_link__1gt5k1p" href="fab-group.html">FAB.Group</a></div></div><a class="_link__1gt5k1p" href="headline.html">Headline</a><a class="_link__1gt5k1p" href="helper-text.html">HelperText</a><a class="_link__1gt5k1p" href="icon-button.html">IconButton</a><div><div class="_row__1gt5k1p"><a class="_link__1gt5k1p" href="">List</a><button class="_buttonIcon__1gt5k1p _expandedIcon__1gt5k1p" style="opacity:0"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div class="_sectionItems__1gt5k1p _sectionItemsVisible__1gt5k1p"><a class="_link__1gt5k1p" href="list-accordion.html">List.Accordion</a><a class="_link__1gt5k1p" href="list-icon.html">List.Icon</a><a class="_link__1gt5k1p" href="list-item.html">List.Item</a><a class="_link__1gt5k1p" href="list-section.html">List.Section</a></div></div><a class="_link__1gt5k1p" href="modal.html">Modal</a><a class="_link__1gt5k1p" href="paragraph.html">Paragraph</a><div><div class="_row__1gt5k1p"><a class="_link__1gt5k1p" href="portal.html">Portal</a><button class="_buttonIcon__1gt5k1p _expandedIcon__1gt5k1p" style="opacity:0"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div class="_sectionItems__1gt5k1p _sectionItemsVisible__1gt5k1p"><a class="_link__1gt5k1p" href="portal-host.html">Portal.Host</a></div></div><a class="_link__1gt5k1p" href="progress-bar.html">ProgressBar</a><div><div class="_row__1gt5k1p"><a class="_link__1gt5k1p" href="radio-button.html">RadioButton</a><button class="_buttonIcon__1gt5k1p _expandedIcon__1gt5k1p" style="opacity:0"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div class="_sectionItems__1gt5k1p _sectionItemsVisible__1gt5k1p"><a class="_link__1gt5k1p" href="radio-button-android.html">RadioButton.Android</a><a class="_link__1gt5k1p" href="radio-button-group.html">RadioButton.Group</a><a class="_link__1gt5k1p" href="radio-button-ios.html">RadioButton.IOS</a></div></div><a class="_link__1gt5k1p" href="searchbar.html">Searchbar</a><a class="_link__1gt5k1p" href="snackbar.html">Snackbar</a><a class="_link__1gt5k1p" href="subheading.html">Subheading</a><a class="_link__1gt5k1p" href="surface.html">Surface</a><a class="_link__1gt5k1p" href="switch.html">Switch</a><a class="_link__1gt5k1p" href="text.html">Text</a><a class="_link__1gt5k1p" href="text-input.html">TextInput</a><a class="_link__1gt5k1p" href="title.html">Title</a><a class="_link__1gt5k1p" href="toggle-button.html">ToggleButton</a><a class="_link__1gt5k1p" href="touchable-ripple.html">TouchableRipple</a></nav></div></aside><div class="_container__z02bld"><main class="_content__z02bld"><div class="_markdown__1e8xr4b"><h2>Configuring icons</h2>
<p>Many of the components require the <a href="https://github.com/oblador/react-native-vector-icons">react-native-vector-icons</a> library to render correctly. If you're using Expo, you don't need to do anything extra, but if it's vanilla React Native project, you need link the library as described in the getting started guide.</p>
<p>If you opted out of vector icons support using <a href="https://github.com/satya164/babel-plugin-optional-require">babel-plugin-optional-require</a>, you won't be able to use icon names for the icon prop anymore. Some components may not look correct without vector icons and might need extra configuration.</p>
<h2>Using the <code>icon</code> prop</h2>
<p>Many components such as <code>Button</code> accept an <code>icon</code> prop which is used to display an icon. The <code>icon</code> prop supports the following type of values:</p>
<h3>1. An icon name</h3>
<p>You can pass the name of an icon from <a href="https://material.io/icons/"><code>MaterialIcon</code></a>. This will use the <a href="https://github.com/oblador/react-native-vector-icons"><code>react-native-vector-icons</code></a> library to display the icon.</p>
<p>Example:</p>
<pre><code class="language-js"><span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Button</span> <span class="token attr-name" >icon</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>add-a-photo<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
Press me
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>Button</span><span class="token punctuation" >></span></span>
</code></pre>
<h3>2. An image source</h3>
<p>You can pass an image source, such as an object of shape <code>{ uri: 'https://path.to' }</code> or a local image: <code>require('../path/to/image.png')</code> to use as an icon. The image might be rendered with a different color than the one provided depending on the component. If don't want this behavior, see the next example to pass an <code>Image</code> element.</p>
<p>Remote image:</p>
<pre><code class="language-js"><span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Button</span> <span class="token attr-name" >icon</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation brackets-braces" >{</span><span class="token punctuation brackets-braces" >{</span> uri<span class="token punctuation" >:</span> <span class="token string" >'https://avatars0.githubusercontent.com/u/17571969?v=3&s=400'</span> <span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-braces" >}</span></span><span class="token punctuation" >></span></span>
Press me
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>Button</span><span class="token punctuation" >></span></span>
</code></pre>
<p>Local image:</p>
<pre><code class="language-js"><span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Button</span> <span class="token attr-name" >icon</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation brackets-braces" >{</span><span class="token function" >require</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >'../assets/chameleon.jpg'</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation brackets-braces" >}</span></span><span class="token punctuation" >></span></span>
Press me
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>Button</span><span class="token punctuation" >></span></span>
</code></pre>
<h3>3. A render function</h3>
<p>You can pass a function which returns a react element to be used an icon. The function receives an object with <code>size</code> and <code>color</code> properties as it's argument. element is used as is without any modification. However, it might get clipped if the provided element's size are bigger than what the component renders. It's upto you to make sure that the size of the element is correct.</p>
<p>Example:</p>
<pre><code class="language-js"><span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Button</span>
<span class="token attr-name" >icon</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation brackets-braces" >{</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span> size<span class="token punctuation" >,</span> color <span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=</span><span class="token operator" >></span> <span class="token punctuation brackets-parentheses" >(</span>
<span class="token operator" ><</span>Image
source<span class="token punctuation" >=</span><span class="token punctuation brackets-braces" >{</span><span class="token function" >require</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >'../assets/chameleon.jpg'</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation brackets-braces" >}</span>
style<span class="token punctuation" >=</span><span class="token punctuation brackets-braces" >{</span><span class="token punctuation brackets-braces" >{</span> width<span class="token punctuation" >:</span> size<span class="token punctuation" >,</span> height<span class="token punctuation" >:</span> size<span class="token punctuation" >,</span> tintColor<span class="token punctuation" >:</span> color <span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-braces" >}</span></span>
<span class="token punctuation" >/></span></span>
<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation brackets-braces" >}</span>
<span class="token operator" >></span>
Press me
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>Button</span><span class="token punctuation" >></span></span>
</code></pre>
<h2>RTL support</h2>
<p>If you want your icon to behave properly in a RTL environment, you can pass an object to the <code>icon</code> prop with shape: <code>{ source: { uri: 'https://path.to' }, direction : 'rtl' }</code>. <code>source</code> can be any of the values that the <code>icon</code> prop accepts in <a href="#1.-an-icon-name">option 1</a> and <a href="#2.-an-image-source">option 2</a>. For <code>direction</code> you have few options:</p>
<ol>
<li><code>auto</code> - uses the device language to determine if icon should be displayed from rtl. Uses the <code>I18nManager</code> module to get this info.</li>
<li><code>rtl</code> - flips the icon so that it is rtl, this is regradless of the device language.</li>
<li><code>ltr</code> - displays from ltr, even if in an rtl environment.</li>
</ol>
<p>Example for using an image source:</p>
<pre><code class="language-js"><span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Button</span> <span class="token attr-name" >icon</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation brackets-braces" >{</span><span class="token punctuation brackets-braces" >{</span> source<span class="token punctuation" >:</span> <span class="token punctuation brackets-braces" >{</span> uri<span class="token punctuation" >:</span> <span class="token string" >'https://avatars0.githubusercontent.com/u/17571969?v=3&s=400'</span> <span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >,</span> direction<span class="token punctuation" >:</span> <span class="token string" >'rtl'</span> <span class="token punctuation brackets-braces" >}</span></span><span class="token attr-name" >}</span><span class="token punctuation" >></span></span>
Press me
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>Button</span><span class="token punctuation" >></span></span>
</code></pre>
<p>Example for using an icon name:</p>
<pre><code class="language-js"><span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Button</span> <span class="token attr-name" >icon</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation brackets-braces" >{</span><span class="token punctuation brackets-braces" >{</span> source<span class="token punctuation" >:</span> <span class="token string" >"add-a-photo"</span><span class="token punctuation" >,</span> direction<span class="token punctuation" >:</span> <span class="token string" >'rtl'</span> <span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-braces" >}</span></span><span class="token punctuation" >></span></span>
Press me
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>Button</span><span class="token punctuation" >></span></span>
</code></pre>
<p>You can also use a render function. Along with <code>size</code> and <code>color</code>, you have access to <code>direction</code> which will either be <code>'rtl'</code> or <code>'ltr'</code>. You can then decide how to render your icon component accordingly.</p>
<p>Example of using a render function:</p>
<pre><code class="language-js"><span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Button</span>
<span class="token attr-name" >icon</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation brackets-braces" >{</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span> size<span class="token punctuation" >,</span> color<span class="token punctuation" >,</span> direction <span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=</span><span class="token operator" >></span> <span class="token punctuation brackets-parentheses" >(</span>
<span class="token operator" ><</span>Image
source<span class="token punctuation" >=</span><span class="token punctuation brackets-braces" >{</span><span class="token function" >require</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >'../assets/chameleon.jpg'</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation brackets-braces" >}</span>
style<span class="token punctuation" >=</span><span class="token punctuation brackets-braces" >{</span><span class="token punctuation brackets-square" >[</span>
<span class="token punctuation brackets-braces" >{</span>
transform<span class="token punctuation" >:</span> <span class="token punctuation brackets-square" >[</span><span class="token punctuation brackets-braces" >{</span> scaleX<span class="token punctuation" >:</span> direction <span class="token operator" >===</span> <span class="token string" >'rtl'</span> <span class="token operator" >?</span> <span class="token operator" >-</span><span class="token number" >1</span> <span class="token punctuation" >:</span> <span class="token number" >1</span> <span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >]</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >}</span></span><span class="token attr-name" >,</span>
<span class="token attr-name" >{</span>
<span class="token attr-name" ><span class="token namespace" >width:</span></span> <span class="token attr-name" >size,</span>
<span class="token attr-name" ><span class="token namespace" >height:</span></span> <span class="token attr-name" >size,</span>
<span class="token attr-name" ><span class="token namespace" >tintColor:</span></span> <span class="token attr-name" >color</span>
<span class="token attr-name" >}</span>
<span class="token attr-name" >]}</span>
<span class="token punctuation" >/></span></span>
<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation brackets-braces" >}</span>
<span class="token operator" >></span>
Press me
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>Button</span><span class="token punctuation" >></span></span>
</code></pre>
</div></main></div></div></div>
<script>
window.__INITIAL_PATH__ = 'icons';
</script>
<script src="app.bundle.js"></script><script src="scripts/snack.js"></script></body></html>