vue项目使用svg文件
vue项目使用svg文件,本地svg文件导入
在vue中使用 svg 有两种方式:
1、使用本地的svg
2、把本地的 svg 上传到 iconfont中,统一生成 symbol 格式的文件引入
本地svg导入
一.建立模板组件
本质上就是构建自定义组件(这里取名:IconSvg)来代替svg标签,目的当然是封装,以便更简单使用。
<template>
<div class="icon-wrapper">
<svg class="icon" aria-hidden="true">
<use :xlink:href="iconName"></use>
</svg>
</div>
</template>
<script>
// 引入从iconfont 下载的symbox文件
// import '@/assets/icons/iconfont-svg.js'
// 引入本地的svg文件
// 定义一个加载目录的函数
const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('@/assets/icons/svg', false, /\.svg$/)
// 加载目录下的所有的 svg 文件
requireAll(req)
// console.log('I: 加载svg文件:', req.keys())
export default {
name: 'IconSvg',
props: {
name: String,
prefix: {
type: String,
default: 'icon-'
}
},
computed: {
iconName () {
let name = `#${this.prefix}${this.name}`
return name
}
}
}
</script>
<style scoped>
/*.icon-wrapper {
display: inline-block;
}
.icon {
width: 100%;
height: 100%;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}*/
.icon-wrapper {
/* Using currentColor above lets
us use `color` for changing the color
of our icons: */
color: red;
/* The width and height of the SVG
was previously set to 1em.
This allows us to use `font-size`
to change the size of our icon: */
font-size: 48px;
}
.icon {
display: inline-block;
color: #444444;
width: 1em;
height: 1em;
fill: currentColor;
}
</style>
svg文件通过requireAll函数加载目录下的svg文件进行全部加载。
使用模板的方法为:
<IconSvg name="不包含后缀名的文件名"/>
比如文件名: home.svg, 例子: <IconSvg name="home"/>
一般这个组件作为全局组件,通过以下方式进行全局添加:
在main.js文件(入口文件)
Vue.component('IconSvg', require(组件路径名).default)
2.加载器配置
在1点中:xlink:href是根据id进行定位资源的。
svg里面并没有包含symbolId,需要使用加载器进行加载,因此才会有本步骤。
如果不采用本步骤,可以类似以下的代码:https://codepen.io/Keyamoon/pen/vEXLQX
html文件:
<html>
<head>
<title>IcoMoon - SVG Icons</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<svg style="position: absolute; width: 0; height: 0; overflow: hidden" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="icon-home" viewBox="0 0 1024 1024">
<title>home</title>
<path class="path1" d="M512 96l-512 512 96 96 96-96v416h256v-192h128v192h256v-416l96 96 96-96-512-512zM512 512c-35.346 0-64-28.654-64-64s28.654-64 64-64c35.346 0 64 28.654 64 64s-28.654 64-64 64z"></path>
</symbol>
</defs>
</svg>
<svg class="icon icon-home"><use xlink:href="#icon-home"></use></svg><span> icon-home</span>
</body>
</html>
body {
font: 32px sans-serif; color: #444;
margin: 1em;
}
.icon {
display: inline-block;
color: #444444;
width: 1em;
height: 1em;
fill: currentColor;
}
.icon-home {
/* Using currentColor above lets
us use `color` for changing the color
of our icons: */
color: red;
/* The width and height of the SVG
was previously set to 1em.
This allows us to use `font-size`
to change the size of our icon: */
font-size: 48px;
}
以上是额外扩展,回归主题:
在module的rules中加入:
{
test: /(\.svg)(\?.*)?$/,
loader: 'svg-sprite-loader',
include: [resolve('src/assets/icons/svg')],
options: {
symbolId: 'icon-[name]'
}
}
同时test: /\.(png|jpe?g|gif|svg)(\?.*)?$/ 追加exclude: [resolve('src/assets/icons/svg')],
如下:
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
exclude: [resolve('src/assets/icons/svg')],
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
}
src/assets/icons/svg:是存放svg文件的路径,需要根据实际路径进行替换。
3.安装加载器模块。
在第二点使用加载器:svg-sprite-loader,检测下自己的package.json有没有相关依赖,没有的话,在项目根目录cmd调用:
npm install svg-sprite-loader
使用iconfont图标库
在做这个项目的时候,很遗憾,iconfont无法使用。它是阿里的图标库。
做法参考:iconfont字体图标的使用方法--超简单! - 全堆栈溢出攻城狮 - 博客园
IcoMoon库
这是国外的图标库,访问速度还可以
更多推荐
所有评论(0)