vue中pdf预览组件_vue组件中使⽤svg作icon
最近在写 vue 的组件，需要⽤到⼀些 icon，于是我就按照以往的引⽤⽅法，从 iconfont 的官⽹上到了我需要的 icon，下载 icon 的 ttf 等⽂件，放到项⽬中，并且写了 iconfont.css 来引⽤，但是同事说这种⽅式很容易跟使⽤组件的项⽬中的冲突，需要将字体⽂件转换成 svg 使⽤，因此我下载了每个 icon 的 svg ⽂件，通过 img 的⽅式引⼊了，本以为⼤功告成，但是引⼊到另外的项⽬中后，发现 svg ⽂件不到，查看源码，发现是因为相对路径的问题，于是就更换⼀种⽅法，将相对路径改成绝对路径，还是不到⽂件。折腾了好久，最后还是没有解决，看了 vue-cli 中 webpack 对 svg 的处理，最后修改 webpack 中打包⽂件的配置，还是不可以，⽆奈之下，只好把 svg 转换成 png，并且配置 url-loader 的 limit 为 8kb，⼩于 8kb 的图⽚⽂件都打包成 base64 的格式，解决问题。
有看到⼀个视频中介绍使⽤ symbol.js 的⽅式引⼊，于是跟着操作了⼀下，成功引⼊ icon，并且还可以改变 icon 的⼤⼩以及颜⾊等。第⼀步：注册⼀个 iconfont 的账号，并将⾃⼰看中的图标加⼊⼀个项⽬中，下图是我需要的 icon。
第⼆步：切换到 Symbol 的页签，点击查看在线链接，可以看到⼀个在线的 js 链接。
第三步：将以上⽂件中的代码下载或者拷贝出来，放⼊⼀个 icon.js ⽂件中。
第四步：在我们的项⽬中新建⼀个 Icon.vue ⽂件，内容如下：
<template>
<svg class="icon" aria-hidden="true">
<use :xlink:href="`#icon-${name}`" />
</svg>
</template>svg怎么转为pdf
<script>
import "./icon.js";
export default {
name: "Icon",
props: ["name"]
};
</script>
<style lang="scss">
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
color: red;
font-size: 30px;
}
</style>
第五步：在需要⽤到 icon 的⽂件中引⼊使⽤即可。注意：传的参数 name 必须是你图标⽂件中的名称，⽐如我有⼀个图标是 icon-Down，那么传⼊的 name 是 Down。跟图标名称不同的不可以显⽰，另外这个名称可以随你⾃⼰喜好修改。
到此，可以再本项⽬中使⽤这个 icon 组件。
最后，组件中的图⽚我是通过转为 base64 的⽅式才在另外的项⽬中显⽰出来的，有哪位同学有更好的⽅法，欢迎留⾔评论~

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。