@fortawesome/free-solid-svg-icons#faStar TypeScript Examples

The following examples show how to use @fortawesome/free-solid-svg-icons#faStar. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: navigation.component.ts    From dating-client with MIT License 6 votes vote down vote up 
menuItems: MenuItem[] = [
    {
      title: 'Members',
      link: '/members/all',
      icon: faUsers,
    },
    {
      title: 'Matches',
      link: '/matches',
      icon: faStar,
    },
    {
      title: 'Messages',
      link: '/messages',
      icon: faComments,
    }
  ];
Example #2
Source File: App.tsx    From TabMerger with GNU General Public License v3.0 6 votes vote down vote up 
/**
 * Icons listed here no longer need to be imported in other files.
 * Instead a string can be passed to the `icon` property.
 * By default, the icons are all "solid", which is why `far` is also added ...
 * ... simply do `icon={["far", "icon-name"]}` to use the "regular" version of "icon-name"
 * @see https://fontawesome.com/v5.15/how-to-use/on-the-web/using-with/react#using
 */
library.add(
  far,
  faCog,
  faSearch,
  faTimes,
  faWindowRestore,
  faEllipsisV,
  faWindowMaximize,
  faTimesCircle,
  faStar,
  faMask,
  faExclamationCircle,
  faCopy,
  faAngleDown,
  faAngleUp,
  faCheckCircle,
  faUpload
);
Example #3
Source File: nodes-table.component.ts    From thorchain-explorer-singlechain with MIT License 5 votes vote down vote up 
constructor() {
    this.pinIcon = faStar;
  }
Example #4
Source File: EventLottery.tsx    From apps with MIT License 5 votes vote down vote up 
EventLotteryBox = ({
    region,
    boxes,
    itemMap,
}: {
    region: Region;
    boxes: Event.EventLotteryBox[];
    itemMap: Map<number, Item.Item>;
}) => {
    return (
        <Table hover responsive>
            <thead>
                <tr>
                    <th className="text-center">#</th>
                    <th>Detail</th>
                    <th>Reward</th>
                    <th className="text-center">Limit</th>
                </tr>
            </thead>
            <tbody>
                {boxes.map((box) => {
                    return (
                        <tr key={box.no}>
                            <th scope="row" className="text-center">
                                {box.no}
                                {box.isRare ? (
                                    <>
                                        {" "}
                                        <FontAwesomeIcon icon={faStar} />
                                    </>
                                ) : null}
                            </th>
                            <td>{box.detail}</td>
                            <td>
                                {mergeElements(
                                    box.gifts.map((gift) => (
                                        <GiftDescriptor
                                            key={`${gift.objectId}-${gift.priority}`}
                                            region={region}
                                            gift={gift}
                                            items={itemMap}
                                        />
                                    )),
                                    ", "
                                )}
                            </td>
                            <td className="text-center">{box.maxNum}</td>
                        </tr>
                    );
                })}
            </tbody>
        </Table>
    );
}
Example #5
Source File: StarDisplay.tsx    From genshin-optimizer with MIT License 5 votes vote down vote up 
StarIcon = () => <FontAwesomeIcon icon={faStar} />
Example #6
Source File: FeedbackForm.tsx    From TutorBase with MIT License 4 votes vote down vote up 
export default function FeedbackForm({apptTutorId}: IProps) {
    const [formOpen, setFormOpen] = useState(false);
    const clientData = useSelector(selectClientData);
    const [feedbackMessage, setFeedbackMessage] = useState("");
    const [rating, setRating] = useState(0);

    const submitFeedback = async () => {
        let clientId = clientData.clientId;
        let tutorId = apptTutorId;

        setFormOpen(false)

        await api.SubmitFeedback({
            clientId: clientId,
            tutorId: tutorId,
            message: feedbackMessage,
            rating: rating
        });

        // TODO: Show some Toast UI confirming that the rating was submitted
    }

    return (
        <Container>
            <Button onClick={(e) => {
                setFormOpen(true);
                e.stopPropagation();
            }}
                    style={{
                        minWidth: '60px',
                        lineHeight: '1',
                        position: "relative",
                    }}>
                <div style={{
                    fontSize: "clamp(8px, 1vw, 12px)"
                }}>
                    Rate
                    <FontAwesomeIcon icon={faStar} style={{marginLeft: '5px'}}/>
                </div>
            </Button>

            <Modal
                isOpen={formOpen}
                toggle={() => setFormOpen(!formOpen)}
            >
                <ModalHeader toggle={() => setFormOpen(!formOpen)}>
                    Please give feedback on your session below.
                </ModalHeader>
                <StyledBody>
                    <Label for="exampleText">
                        What did you think of your session?
                    </Label>
                    <Input
                        id="exampleText"
                        name="text"
                        type="textarea"
                        value={feedbackMessage}
                        onChange={(element) => setFeedbackMessage(element.target.value)}
                    />

                    <Label style={{marginTop: '1em'}}>
                        How would you rate your session?
                    </Label>
                    <div style={{lineHeight: '0.75'}}>
                        <ReactStars size={40} value={rating} onChange={new_rating => setRating(new_rating)}/>
                    </div>
                </StyledBody>
                <ModalFooter>
                    <Button
                        color="primary"
                        onClick={() => submitFeedback()}
                    >
                        Submit
                    </Button>
                    {' '}
                    <Button onClick={() => setFormOpen(false)}>
                        Cancel
                    </Button>
                </ModalFooter>
            </Modal>
        </Container>
    )
}