import React from 'react';
import { View } from '@ray-js/ray';
import { Icon } from '@ray-js/icons';

export default function Demo() {
  return (
    <View style={{ padding: 20, flexDirection: 'row', gap: 15 }}>
      <Icon type="icon-right" size={24} />
      <Icon type="icon-warning" size={24} />
      <Icon type="icon-checkmark" size={24} />
      <Icon type="icon-cancel" size={24} />
    </View>
  );
}

import React from 'react';
import { View } from '@ray-js/ray';
import { Icon } from '@ray-js/icons';

export default function Demo() {
  return (
    <View style={{ padding: 20, flexDirection: 'row', alignItems: 'center', gap: 15 }}>
      <Icon type="icon-right" size={16} color="#007aff" />
      <Icon type="icon-right" size={24} color="#007aff" />
      <Icon type="icon-right" size={32} color="#007aff" />
      <Icon type="icon-right" size={48} color="#007aff" />
    </View>
  );
}

import React from 'react';
import { View } from '@ray-js/ray';
import { Icon } from '@ray-js/icons';

export default function Demo() {
  return (
    <View style={{ padding: 20, flexDirection: 'row', gap: 15 }}>
      <Icon type="icon-warning" size={30} color="#ff4d4f" />
      <Icon type="icon-checkmark" size={30} color="#52c41a" />
      <Icon type="icon-a-cloudrainfill" size={30} color="#1890ff" />
      <Icon type="icon-a-cloudsleetfill" size={30} color="#722ed1" />
    </View>
  );
}