Как я могу использовать элемент плюс пользовательский значок меню?

Question

Я работаю над nuxt 3 с элементом плюс пользовательский интерфейс. Я хочу использовать пользовательский значок меню для элемента плюс пункт меню<el-menu-item>

Я пытался импортировать, пытался импортировать значок svg из папки активов, но это не сработало.

В настоящее время

      <el-menu-item index="/"><el-icon><Setting /></el-icon>Setting</el-menu-item>

Что я хочу

      <el-menu-item index="/"><el-icon><MySettingIcon /></el-icon>Setting</el-menu-item>

Answer 1

Попробуйте вот так:

      <el-menu-item class="test" index="1">
      <template #title>
        <el-icon
          :size="iconSize"
          color="#77B4F2"
          ><MySettingIcon/>
        </el-icon>
      </template>
</el-menu-item>

импортировав ваш компонент:

      components: {
    MySettingIcon
}

Или вы можете использовать значок svg напрямую:

      <el-menu-item class="test" index="1">
      <template #title>
        <el-icon
          :size="iconSize"
          color="#77B4F2"
          >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="16"
            height="16"
            fill="currentColor"
            class="bi bi-lightning-fill"
            viewBox="0 0 16 16"
          >
            <path
              d="M5.52.359A.5.5 0 0 1 6 0h4a.5.5 0 0 1 
              .474.658L8.694 6H12.5a.5.5 0 0 1 .395.807l-7 
               9a.5.5 0 0 1-.873-.454L6.823 9.5H3.5a.5.5 0 0 
               1-.48-.641l2.5-8.5z"
            /></svg>
        </el-icon>
      </template>
</el-menu-item>

РЕДАКТИРОВАТЬ

Вот пример компонента MySettingIcon.vue:

      <template>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="16"
        height="16"
        fill="currentColor"
        class="bi bi-emoji-frown"
        viewBox="0 0 16 16"
      >
        <path
          d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"
        />
        <path
          d="M4.285 12.433a.5.5 0 0 0 .683-.183A3.498 3.498 0 0 1 8 10.5c1.295 0 2.426.703 3.032 1.75a.5.5 0 0 0 .866-.5A4.498 4.498 0 0 0 8 9.5a4.5 4.5 0 0 0-3.898 2.25.5.5 0 0 0 .183.683zM7 6.5C7 7.328 6.552 8 6 8s-1-.672-1-1.5S5.448 5 6 5s1 .672 1 1.5zm4 0c0 .828-.448 1.5-1 1.5s-1-.672-1-1.5S9.448 5 10 5s1 .672 1 1.5z"
        />
      </svg>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "my-setting-icon",
  data() {
    return {}
  },
});
</script>

<style scoped>
.bi-emoji-frown:hover {
  background-color: lightcoral;
  border-radius: 8px;
}
</style>

Вы можете поместить это в папку src/icons.