Nav.vue

<template>
  <nav class="menu">
    <ul class="menu-list">
      <li class="menu-list-item">
        <router-link :to="{name: 'Create Rule'}" class="link">
          <span class="menu-item-text">New Rule</span>
          <svg class="icon">
            <use xlink:href="#rule-icon" />
          </svg>
        </router-link>
      </li>
      <li class="menu-list-item">
        <router-link :to="{name: 'Games'}" class="link">
          <span class="menu-item-text">New Set</span>
          <svg class="icon">
            <use xlink:href="#ruleset-icon" />
          </svg>
        </router-link>
      </li>
    </ul>
  </nav>
</template>

<script>
export default {
  name: 'sticky-nav'
}
</script>

<style lang="scss" scoped>
  @import "../../styles/_colors.scss";

  // other styling here
  
  .icon{
    height: 20px;
    width: 20px;
    
    // I'm defining a CSS variable for path color, which works
    --path-color: $primary;
    
    // this wont work because technically the icon doesn't contain
    // any path, its just a reference to a symbol
    path{
      fill: $primary;
    }
  }
</style>