JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://knockoutjs.com/downloads/knockout-3.0.0.js"></script>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display:none">
    <defs>
        <symbol id="icon-home" viewBox="0 0 32 32">
            <path class="path1" d="M32 18.451l-16-12.42-16 12.42v-5.064l16-12.42 16 12.42zM28 18v12h-8v-8h-8v8h-8v-12l12-9z"></path>
        </symbol>
        <symbol id="icon-home2" viewBox="0 0 32 32">
            <path class="path1" d="M32 19l-6-6v-9h-4v5l-6-6-16 16v1h4v10h10v-6h4v6h10v-10h4z"></path>
        </symbol>
    </defs>
</svg>
<div id="koRoot">
    <div>
        <p>Hard Code</p>
        <svg class="svg-icon">
            <use xlink:href="#icon-home"></use>
        </svg>
    </div>
    <div>
        <p>Knockout</p>
        <svg class="svg-icon">
            <use data-bind="attr:{ 'xlink:href': icon }" xlink:href=''></use>
        </svg>
    </div>
</div>

CSS

.svg-icon {
    display: inline-block;
    width: 32px;
    height: 32px;
    fill: #3b6c8e
}

JavaScript

// Here's my data model
var ViewModel = function () {
    var self = this;
    self.icon = ko.observable('#icon-home');
   
    setTimeout(function () {
        self.icon('#icon-home2');
    }, 1000);

};

ko.applyBindings(new ViewModel(), document.getElementById('koRoot'));