Home Reference Source

src/assets/iconsSvgr/PenIconSvgr.js

import * as React from 'react';
import Svg, {Path} from 'react-native-svg';

/**
 * SVGR component representing the "pen" symbol.
 * @param {Object} props - Properties
 * @param {Object} props.fillColor Fill color of the pen
 * @returns {Object} Pen symbol
 */
export default function PenIconSvgr(props) {
    const fillColor = props.fillColor;

    // Initialize the colors of the pen
    let ringColor = '#c7d3d8';
    let tipColor = '#000000';
    if (fillColor !== undefined) {
        tipColor = fillColor;
        ringColor = fillColor;
    }

    return (
        <Svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 100 100"
            {...props}>
            <Path
                style={{
                    fill: 'none',
                }}
                d="M0 0h100v100H0z"
            />
            <Path
                d="M47.09-5.15h20.3c3.2 0 5.79 2.59 5.79 5.79v90.04H41.3V.64c0-3.2 2.59-5.79 5.79-5.79Z"
                transform="rotate(45 57.239 42.759)"
                style={{
                    fill: '#7C777E',
                }}
            />
            <Path
                d="m3.46 99.82 31.03-11.86c.06-.02.08-.11.03-.16L12.19 65.47s-.13-.03-.16.03L.18 96.54c-.78 2.05 1.23 4.07 3.28 3.28Z"
                style={{
                    fill: '#fed0ac',
                }}
            />
            <Path
                d="M16.99 94.65 3.45 99.82c-2.05.78-4.07-1.23-3.28-3.28L5.34 83l11.65 11.65Z"
                style={{fill: tipColor}}
            />
            <Path
                transform="rotate(45 80.937 19.055)"
                style={{
                    fill: ringColor,
                }}
                d="M65 14.35h31.88v9.39H65z"
            />
        </Svg>
    );
}