import * as React from "react" ; import { colors } from "../colors" ; export interface TipIconProps { height ? : number ; width ? : number ; } export const TipIcon = props => { const width = ( props . width || 32 ) . toString ( ) ; const height = ( props . height || 32 ) . toString ( ) ; return ( < svg width = { width } height = { height } viewBox = "0 0 32 32" version = "1.1" xmlns = "http://www.w3.org/2000/svg" > < g stroke = "none" strokeWidth = "1" fill = "none" fillRule = "evenodd" > < polygon points = "4 4 28 4 28 28 4 28" > < /polygon> < path d = "M17.41,22.09 L17.41,22.67 C17.41,23.4 16.81,24 16.08,24 L16.07,24 C15.34,24 14.74,23.4 14.74,22.67 L14.74,22.07 C13.41,21.79 12.23,21.06 11.73,19.83 C11.5,19.28 11.93,18.67 12.53,18.67 L12.77,18.67 C13.14,18.67 13.44,18.92 13.58,19.27 C13.87,20.02 14.63,20.54 16.09,20.54 C18.05,20.54 18.49,19.56 18.49,18.95 C18.49,18.12 18.05,17.34 15.82,16.81 C13.34,16.21 11.64,15.19 11.64,13.14 C11.64,11.42 13.03,10.3 14.75,9.93 L14.75,9.33 C14.75,8.6 15.35,8 16.08,8 L16.09,8 C16.82,8 17.42,8.6 17.42,9.33 L17.42,9.95 C18.8,10.29 19.67,11.15 20.05,12.21 C20.25,12.76 19.83,13.34 19.24,13.34 L18.98,13.34 C18.61,13.34 18.31,13.08 18.21,12.72 C17.98,11.96 17.35,11.47 16.09,11.47 C14.59,11.47 13.69,12.15 13.69,13.11 C13.69,13.95 14.34,14.5 16.36,15.02 C18.38,15.54 20.54,16.41 20.54,18.93 C20.52,20.76 19.15,21.76 17.41,22.09 L17.41,22.09 Z" stroke = { colors . basic . WHITE } strokeWidth = "0.12" fill = "#191919" fillRule = "nonzero" > < /path> < path d = "M16,4 C22.627417,4 28,9.372583 28,16 C28,22.627417 22.627417,28 16,28 C9.372583,28 4,22.627417 4,16 C4,9.372583 9.372583,4 16,4 Z M16,6 C10.4771525,6 6,10.4771525 6,16 C6,21.5228475 10.4771525,26 16,26 C21.5228475,26 26,21.5228475 26,16 C26,10.4771525 21.5228475,6 16,6 Z" fill = "#191919" > < /path> < /g> < /svg>); } ;