IDs that are shared between SVGs can cause problems

[alexanderson1993]

<symbol viewBox="0 0 28 24" id="icnEye">
    <title>icnEye</title>
    <defs>
        <path d="M14,0 C19.1546577,0 23.8213243,3 28,9 C23.8213243,15 19.1546577,18 14,18 C8.84534234,18 4.17867567,15 0,9 C4.17867567,3 8.84534234,0 14,0 Z M14,2 C10.1708257,2 6.4374924,4.33333333 2.8,9 C6.4374924,13.6666667 10.1708257,16 14,16 C17.8291743,16 21.5625076,13.6666667 25.2,9 C21.5625076,4.33333333 17.8291743,2 14,2 Z M14,5 C16.209139,5 18,6.790861 18,9 C18,11.209139 16.209139,13 14,13 C11.790861,13 10,11.209139 10,9 C10,6.790861 11.790861,5 14,5 Z" id="path-1"></path>
    </defs>
    <g id="Assets" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Artboard" transform="translate(-298, -774)">
            <g id="icnEye" transform="translate(298, 777)">
                <mask id="mask-2" fill="white">
                    <use xlink:href="#path-1"></use>
                </mask>
                <use id="Color" fill="#2F2F39" xlink:href="#path-1"></use>
            </g>
        </g>
    </g>
</symbol>

Suppose there's another symbol that also uses the #path-1 ID - that would cause a conflict, because the IDs aren't scoped to individual symbols.

Solution: Replace all IDs in each SVG with either a random string, or an globally incremented number so there aren't any more collisions.