使用规则
-
- 下载 svg 文件
-
- 引入文件
import svg from '@/assets/icons/xx.svg'
-
- 安装 svg-sprite-loader
yarn add svg -sprite-loader -D
-
- 配置 shims-vue.d.ts
declare module "*.svg" {
const content: string;
export default content;
}
-
- 配置 vue.config.js
- 使用
require
有可能会导致 eslint 报错,结合自己使用的 node 版本,可以改为 import 语法
const path = require('path')
module.exports = {
lintOnSave: false,
chainWebpack: config => {
const dir = path.resolve(__dirname, 'src/assets/icons')
config.module
.rule('svg-sprite')
.test(/\.(svg)(\?.*)?$/)
.include.add(dir).end()
.use('svg-sprite-loader').loader('svg-sprite-loader').options({extract: false}).end()
config.plugin('svg-sprite').use(require('svg-sprite-loader/plugin'), [{plainSprite: true}])
config.module.rule('svg').exclude.add(dir)
}
}
-
- 使用 svg 标签使用 icon
<svg>
<use xlink:href="#xx" />
</ svg>
批量导入 svg
- 引入 icons 目录自动批量导入目录下的全部 svg 文件
__WebpackModuleApi
eslint 有可能会报错未定义,如果报错,尝试在上方声明:
/* global __WebpackModuleApi */
let importAll = (requireContext: __WebpackModuleApi.RequireContext) =>
requireContext.keys().forEach(requireContext);
try {
importAll(require.context("../assets/icons", true, /\.svg$/));
} catch (error) {
console.log(error);
}
Icon 组件封装
<template>
<svg class="icon">
<use :xlink:href="'#' + name" />
</svg>
</template>
<script lang="ts">
let importAll = (requireContext: __WebpackModuleApi.RequireContext) =>
requireContext.keys().forEach(requireContext);
try {
importAll(require.context("../assets/icons", true, /\.svg$/));
} catch (error) {
console.log(error);
}
export default {
name: 'Icon',
props: ['name']
}
</script>
<style lang="scss" scoped>
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
IconFont 文档的 symbol 样式
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}