添加依赖
npm install svg-sprite-loader -D
# 或
yarn add svg-sprite-loader -D
打开vue.config.js
module.exports = {
chainWebpack: config => {
//svg
const svgRule = config.module.rule("svg");
svgRule.uses.clear();
svgRule
.test(/\.svg$/)
.include.add(path.resolve(__dirname, "src/assets/icons"))
.end()
.use("svg-sprite-loader")
.loader("svg-sprite-loader")
.options({
symbolId: "icon-[name]"
});
const fileRule = config.module.rule("file");
fileRule.uses.clear();
fileRule
.test(/\.svg$/)
.exclude.add(path.resolve(__dirname, "src/assets/icons"))
.end()
.use("file-loader")
.loader("file-loader");
}
};
在assets目录下新建icons,存放图标
新建样式和组件
style.less
.svg-icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
SvgIcon.tsx
如果使用模板,转换成模板即可
import { defineComponent, computed } from "vue";
import "./style.less";
export default defineComponent({
name: "SvgIcon",
props: {
id: { type: [String, Number] },
class: { type: String },
icon: { type: String, required: true }
},
setup(props) {
const className = computed(() => {
if (props.class) {
return `svg-icon ${props.class}`;
} else {
return "svg-icon";
}
});
const icon = computed(() => {
return `#icon-${props.icon}`;
});
return () => (
<svg class={className.value} aria-hidden="true">
<use xlinkHref={icon.value} />
</svg>
);
}
});
使用
import SvgIcon from "@/components/icon/SvgIcon";
import "@/assets/icons/alipay.svg";
import "@/assets/icons/qq.svg";
import "@/assets/icons/wechat.svg";
export default defineComponent({
return () => (
<div>
<SvgIcon class="my-icon" icon="qq" />
<SvgIcon class="my-icon" icon="wechat" />
<SvgIcon class="my-icon" icon="alipay" />
</div>
);
}
});