如何用另一个图标替换 bootstrap-vue 下拉插入符号图标？答案

【问题标题】：How replace bootstrap-vue dropdown caret icon with another icon?如何用另一个图标替换 bootstrap-vue 下拉插入符号图标？
【发布时间】：2021-04-05 21:39:39
【问题描述】：

这是一个 bootstrap-vue 下拉菜单，其图标是插入符号。

<div>
  <b-dropdown id="dropdown-1" text="Dropdown Button" class="m-md-2">
    <b-dropdown-item>First Action</b-dropdown-item>
    <b-dropdown-item>Second Action</b-dropdown-item>
  </b-dropdown>
</div>

怎么改成日历图标？

【问题讨论】：

标签： vue.js bootstrap-vue

【解决方案1】：

Vue.component('customIcon', {
  template: `<svg xmlns="http://www.w3.org/2000/svg" width="15.352" height="15.355" viewBox="0 0 15.352 15.355">
        <path id="Union_19" data-name="Union 19" d="M-19.5-15958.5l-7.5,7.5,7.5-7.5-7.5-7.5,7.5,7.5,7.5-7.5-7.5,7.5,7.5,7.5Z" transform="translate(27.176 15966.178)" fill="none" stroke="#bbb" stroke-width="0.5"/>
    </svg>`
})

new Vue({
  el: "#app",
});

<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap@4.5.3/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.css" />

<script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.min.js"></script>


<div id="app">
  <b-dropdown no-caret>
    <template #button-content>
        Custom Dropdown
        <custom-icon /> // or any other icons 
    </template>
    <b-dropdown-item>First Action</b-dropdown-item>
    <b-dropdown-item>Second Action</b-dropdown-item>
  </b-dropdown>
</div>

可以为其添加模板。

【讨论】：