10 examples of 'vector icons react native list' in JavaScript

Every line of 'vector icons react native list' code snippets is scanned for vulnerabilities by our powerful machine learning engine that combs millions of open source libraries, ensuring your JavaScript code is secure.

All examples are scanned by Snyk Code

By copying the Snyk Code Snippets you agree to
this disclaimer
42function Icon(props) {
43 var icon = props.icon,
44 rest = babelHelpers.objectWithoutProperties(props, ['icon']);
45
46
47 return _react2['default'].createElement('i', babelHelpers['extends']({}, (0, _omit2['default'])(rest, ['states', 'variants']), {
48 'data-icon': icon,
49 className: cx(props).build() }));
50}
Important

Use secure code every time

Secure your code as it's written. Use Snyk Code to scan source code in minutes – no build needed – and fix issues immediately. Enable Snyk Code

28function Icon(props) {
29 return _react2.default.createElement(
30 StyledIcon,
31 { className: props.className, size: props.size },
32 _react2.default.createElement('use', { xlinkHref: '#' + (props.symbol || 'placeholder') })
33 );
34}
13export function MaterialIcon (props: *): * {
14 let {
15 wrap,
16 className,
17 ...other
18 } = props;
19 wrap = wrap || 'i';
20 className = classNames(
21 styles.icon,
22 className
23 );
24 return React.createElement(wrap, {
25 className,
26 ...other
27 });
28}
40renderList(props) {
41 return (
42 <ul>
43 {props.entities.map(entity => {
44 return this.renderEntity(entity);
45 })}
46 </ul>
47 );
48}
4function Icons({
5 icons,
6 onMouseDown,
7 onDoubleClick,
8 displayFocus,
9 mouse,
10 selecting,
11 setSelectedIcons,
12}) {
13 const [iconsRect, setIconsRect] = useState([]);
14 function measure(rect) {
15 if (iconsRect.find(r => r.id === rect.id)) return;
16 setIconsRect(iconsRect => [...iconsRect, rect]);
17 }
18 useEffect(() => {
19 if (!selecting) return;
20 const sx = Math.min(selecting.x, mouse.docX);
21 const sy = Math.min(selecting.y, mouse.docY);
22 const sw = Math.abs(selecting.x - mouse.docX);
23 const sh = Math.abs(selecting.y - mouse.docY);
24 const selectedIds = iconsRect
25 .filter(rect => {
26 const { x, y, w, h } = rect;
27 return x - sx < sw && sx - x < w && y - sy < sh && sy - y < h;
28 })
29 .map(icon => icon.id);
30 setSelectedIcons(selectedIds);
31 }, [iconsRect, setSelectedIcons, selecting, mouse.docX, mouse.docY]);
32 return (
33 <IconsContainer>
34 {icons.map(icon => (
35 <StyledIcon
36 key={icon.id}
37 {...icon}
38 displayFocus={displayFocus}
39 onMouseDown={onMouseDown}
40 onDoubleClick={onDoubleClick}
41 measure={measure}
42 />
43 ))}
44 </IconsContainer>
45 );
46}
9var Icon = function Icon(props) {
10 var classNames = ['glyphicon', 'glyphicon-' + props.symbol];
11 if (props.className) {
12 classNames.push(props.className);
13 };
14 return _react2.default.createElement('span', { className: classNames.join(' '), 'aria-hidden': 'true' });
15};
13export default function List(props) {
14 const ListItem = props.component
15 let content = (<div></div>)
16
17 // If we have items, render them
18 if (props.items && props.items.length !== 0) {
19 content = props.items.map((item, index) => (
20 <ListItem key={`item-${index}`} item={item} index={index} />
21 ));
22 } else {
23 // Otherwise render a single component
24 content = <p>{'No Content'}</p>
25 }
26
27 return (
28 <div className={styles.listWrapper}>
29 <ul className={styles.list}>
30 {content}
31 </ul>
32 </div>
33 );
34}
30render() {
31 const childrenToRender = React.Children.toArray(this.props.children).map(item => {
32 if (!item.props.value) {
33 return item;
34 }
35 const props = assign({}, item.props);
36 props.className = (props.className || '').replace('active', '');
37 if (item.props.value === this.state.defaultValue) {
38 props.className = `${props.className} active`.trim();
39 }
40 props.onClick = this.listOnClick.bind(this, item.props.value);
41 return React.cloneElement(item, props);
42 });
43 return React.createElement(
44 this.props.component,
45 this.props,
46 childrenToRender
47 );
48}
74render(props) {
75 const style:any = {}
76 let hasStyle = false
77 if(props.width){
78 hasStyle = true
79 style.width = props.width + 'px'
80 }
81 if(props.height){
82 hasStyle = true
83 style.height = props.height + 'px'
84 }
85 return <ul {...(hasStyle?{style:style}:{})} {...extractClass(props, 'mdc-list', {
86 'mdc-list--two-line': props.items[0] ? props.items[0].secondaryText : '',
87 'mdc-list--crl': props.radioLeft || props.checkboxLeft
88 })}>
89 {props.items.map(item => {
90 if (item.divider || item === true) {
91 return <li role="separator" class="mdc-list-divider"></li>
92 }
93 return <li class={classNames('mdc-list-item', {
94 'mdc-list-item--selected': item.selected
95 })} >
96 {props.checkboxLeft && this._renderCheckbox(props, item)}
97 {props.radioLeft && this._renderRadio(props, item)}
98 {item.icon && <span class="mdc-list-item__graphic material-icons" aria-hidden="true">{item.icon}</span>}
99 <span class="mdc-list-item__text">
100 {item.text ? (item.text && item.secondaryText ? [
101 <span class="mdc-list-item__primary-text">{item.text}</span>,
102 <span class="mdc-list-item__secondary-text">{item.secondaryText}</span>] : item.text) : item}
103 </span>
104 {item.rightIcon && <span class="mdc-list-item__graphic mdc-list-item__meta material-icons" aria-hidden="true">{item.rightIcon}</span>}
105
106 {!props.checkboxLeft && this._renderCheckbox(props, item)}
107 {!props.radioLeft && this._renderRadio(props, item)}
108 </li>
109 })}
110
111
112 </ul>
113 }
15export function Icon (props: IconProps) {
16 const { type, size = 14, className: cn, style: s } = props
17 const className = classnames('clash-iconfont', `icon-${type}`, cn)
18 const style: React.CSSProperties = { fontSize: size, ...s }
19 const iconProps = { ...props, className, style }
20
21 return <i {...iconProps} />
22}

Related snippets