us-state-flags/src/components/flags/FlagTN.js

Complete US state data with flags, utility functions, and React component - zero dependencies for data, optional React support - SVG-only flags, offline ready

import React from 'react';

const FlagTN = function(props) {
  const defaultWidth = props.width || 75;
  const defaultHeight = props.height || Math.round(defaultWidth / 1.5);
  
  return React.createElement('svg', 
    Object.assign({
      width: defaultWidth,
      height: defaultHeight,
      viewBox: '0 0 250 150',
      role: 'img',
      'aria-label': 'Tennessee flag',
      xmlns: 'http://www.w3.org/2000/svg',
      preserveAspectRatio: 'xMidYMid meet',
      style: Object.assign({
        display: 'block',
        border: '1px solid #ddd', // Add border to see exact boundaries
        background: 'white' // Add background to see the flag area
      }, props.style || {})
    }, props),
    // Render the inner SVG content as raw HTML
    React.createElement('g', {
      dangerouslySetInnerHTML: { 
        __html: `<path d="M0 0 C82.5 0 165 0 250 0 C250 49.5 250 99 250 150 C167.5 150 85 150 0 150 C0 100.5 0 51 0 0 Z " fill="#CC0000" transform="translate(0,0)"/> <path d="M0 0 C8.62693567 7.36884089 15.28385702 16.69461531 16.3984375 28.2421875 C16.53930015 41.61005337 13.2630351 52.12643437 3.9921875 61.95703125 C-0.86119823 66.53984495 -5.62213117 69.61132435 -11.9375 71.76171875 C-12.59492187 71.98601562 -13.25234375 72.2103125 -13.9296875 72.44140625 C-23.78202686 75.32984309 -34.40856264 74.28430821 -43.45703125 69.40234375 C-52.97250732 63.27961619 -60.66343843 54.87200075 -64.23828125 44.01171875 C-66.94529171 31.42941316 -65.20823198 20.5066797 -58.55078125 9.4609375 C-52.45650178 0.59501312 -42.55571199 -5.67419714 -32.05078125 -7.91796875 C-20.65676385 -9.64497324 -9.34019533 -6.81628226 0 0 Z " fill="#052C6B" transform="translate(136.9375,42.23828125)"/> <path d="M0 0 C6.93 0 13.86 0 21 0 C21 49.5 21 99 21 150 C14.07 150 7.14 150 0 150 C0 100.5 0 51 0 0 Z " fill="#062D6B" transform="translate(229,0)"/> <path d="M0 0 C8.62693567 7.36884089 15.28385702 16.69461531 16.3984375 28.2421875 C16.53930015 41.61005337 13.2630351 52.12643437 3.9921875 61.95703125 C-0.86119823 66.53984495 -5.62213117 69.61132435 -11.9375 71.76171875 C-12.59492187 71.98601562 -13.25234375 72.2103125 -13.9296875 72.44140625 C-23.78202686 75.32984309 -34.40856264 74.28430821 -43.45703125 69.40234375 C-52.97250732 63.27961619 -60.66343843 54.87200075 -64.23828125 44.01171875 C-66.94529171 31.42941316 -65.20823198 20.5066797 -58.55078125 9.4609375 C-52.45650178 0.59501312 -42.55571199 -5.67419714 -32.05078125 -7.91796875 C-20.65676385 -9.64497324 -9.34019533 -6.81628226 0 0 Z M-54.9375 9.76171875 C-61.32856966 19.57166708 -63.2727152 29.13682386 -61.9375 40.76171875 C-59.46786392 51.07184994 -53.43784772 58.89829671 -44.83984375 64.9375 C-34.73812687 70.72482115 -25.01405719 71.4537624 -13.73046875 69.08984375 C-3.46374196 65.81597842 4.06803113 59.23451077 9.0625 49.76171875 C13.78579505 40.10912823 14.82715033 30.32444446 11.5 20.01171875 C7.13398454 9.48732359 -0.46733887 1.90562759 -10.875 -2.61328125 C-26.77292032 -7.7878121 -44.62274147 -4.23274296 -54.9375 9.76171875 Z " fill="#F1E8EB" transform="translate(136.9375,42.23828125)"/> <path d="M0 0 C1.32 0 2.64 0 4 0 C4 49.5 4 99 4 150 C2.68 150 1.36 150 0 150 C0 100.5 0 51 0 0 Z " fill="#FFFFFF" transform="translate(225,0)"/> <path d="M0 0 C0.33 0 0.66 0 1 0 C1 4.29 1 8.58 1 13 C3.24609375 13.45572917 5.4921875 13.91145833 7.73828125 14.3671875 C10 15 10 15 13 17 C9.04 17.99 5.08 18.98 1 20 C1 24.29 1 28.58 1 33 C-3 29 -3 29 -6 24 C-9.96 24.66 -13.92 25.32 -18 26 C-16.99088542 24.30729167 -15.98177083 22.61458333 -14.97265625 20.921875 C-13.91591598 18.83385809 -13.21281649 17.3409814 -13 15 C-14.18108795 12.56283794 -14.18108795 12.56283794 -15.9375 10.25 C-16.78634766 9.05117187 -16.78634766 9.05117187 -17.65234375 7.828125 C-18.09707031 7.22484375 -18.54179688 6.6215625 -19 6 C-17.20763933 6.47656412 -15.41613103 6.95633498 -13.625 7.4375 C-12.62726563 7.70433594 -11.62953125 7.97117187 -10.6015625 8.24609375 C-8 9 -8 9 -6 10 C-5.62875 8.9171875 -5.62875 8.9171875 -5.25 7.8125 C-3.88449106 4.74010488 -2.22300052 2.50983929 0 0 Z " fill="#F5F6F9" transform="translate(111,77)"/> <path d="M0 0 C3.057952 1.73559438 5.63379989 3.38472619 8 6 C12.23429756 4.68938409 16.07407404 3.05643741 20 1 C19.566875 2.0209375 19.566875 2.0209375 19.125 3.0625 C17.87402645 6.32893093 16.92552045 9.62846123 16 13 C16.5775 13.49371094 17.155 13.98742187 17.75 14.49609375 C18.4925 15.13675781 19.235 15.77742188 20 16.4375 C20.7425 17.07558594 21.485 17.71367188 22.25 18.37109375 C22.8275 18.90863281 23.405 19.44617188 24 20 C24 20.33 24 20.66 24 21 C19.48382401 21.07654536 15.40914783 21.10228696 11 20 C10.80664062 20.62648438 10.61328125 21.25296875 10.4140625 21.8984375 C10.15367187 22.71570313 9.89328125 23.53296875 9.625 24.375 C9.36976563 25.18710938 9.11453125 25.99921875 8.8515625 26.8359375 C8 29 8 29 6 31 C5.34 27.04 4.68 23.08 4 19 C-0.29 18.67 -4.58 18.34 -9 18 C-4.80111818 14.64089455 -2.88170709 13.36233686 2 12 C1.505 10.4221875 1.505 10.4221875 1 8.8125 C0.16033218 5.61126643 -0.19750904 3.2588992 0 0 Z " fill="#F4F5F8" transform="translate(123,57)"/> <path d="M0 0 C3.37641082 3.37641082 4.27450305 5.64517436 6 10 C11.94 9.505 11.94 9.505 18 9 C18 9.66 18 10.32 18 11 C15.46837103 13.49772322 12.72030095 15.70474607 10 18 C11.32 21.63 12.64 25.26 14 29 C9 27 9 27 6.9375 25.8125 C5.061621 24.86741523 5.061621 24.86741523 3.125 25.0625 C-0.09308828 26.48224483 -2.37165917 28.67033426 -5 31 C-6.53166168 26.91556885 -5.63081652 23.20544343 -5 19 C-7.97 17.35 -10.94 15.7 -14 14 C-14 13.67 -14 13.34 -14 13 C-8.06 12.505 -8.06 12.505 -2 12 C-1.34 8.04 -0.68 4.08 0 0 Z " fill="#F5F6F9" transform="translate(97,44)"/> <path d="M0 0 C0.33 0.99 0.66 1.98 1 3 C-2.02790271 8.72615472 -6.96220698 13.06515575 -12 17 C-12 13.08978232 -10.70912572 12.04665804 -8.25 9.0625 C-7.20585937 7.78052734 -7.20585937 7.78052734 -6.140625 6.47265625 C-4.17968301 4.20755355 -2.14884414 2.08592753 0 0 Z " fill="#F8F3F5" transform="translate(147,92)"/> <path d="M0 0 C0.625 1.875 0.625 1.875 1 4 C-1 6 -1 6 -4 7 C-3.39816251 4.97954558 -2.72693904 2.97888961 -2 1 C-1.34 0.67 -0.68 0.34 0 0 Z " fill="#E9EBF0" transform="translate(149,87)"/>`
      }
    })
  );
};

FlagTN.displayName = 'FlagTN';

export default FlagTN;