Skip to content

A
apaas-ui
Commit 7052e228 authored by 刘殿昕's avatar 刘殿昕
Browse files
Options

动态图标示例

parent 52be0cfb
Show whitespace changes
Inline Side-by-side
Showing with 159 additions and 12 deletions
src/components/svgIcon.vue 0 → 100644
View file @ 7052e228
<template>
<svg :class="svgClass" aria-hidden="true">
<use :xlink:href="iconName"/>
</svg>
</template>
<script>
export default {
name: 'SvgIcon',
props: {
iconClass: {
type: String,
required: true,
},
className: {
type: String,
default: '',
},
},
computed: {
iconName () {
return `#icon-${this.iconClass}`
},
svgClass () {
if (this.className) {
return 'svg-icon ' + this.className
} else {
return 'svg-icon'
}
},
},
}
</script>
<style scoped>
.svg-icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
\ No newline at end of file
src/icons/index.js 0 → 100644
View file @ 7052e228
import Vue from 'vue'
import SvgIcon from '@/components/svgIcon' // svg组件
// 注册到全局
Vue.component('svg-icon', SvgIcon)
const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('./svg', false, /\.svg$/)
requireAll(req)
\ No newline at end of file
src/icons/svg/ic_2.svg 0 → 100644
View file @ 7052e228
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 819.2 716.8"><title>ic_画板 2</title><path d="M759.36,283.6C725,121.68,581.84,0,409.6,0,303.36,0,208.08,46.32,142.48,119.84a354.83,354.83,0,0,0-24.72,31c-2.24,3.12-15.36,15.52-15.36,28.4,0,14.16,11.44,25.12,25.6,25.6,16.8.56,24.72-14.4,27.52-18.48C210.72,104.88,303.76,51.2,409.6,51.2c146,0,267.68,102.08,298.88,238.64a76.51,76.51,0,1,0,50.88-6.24ZM742.4,384A25.6,25.6,0,1,1,768,358.4,25.57,25.57,0,0,1,742.4,384Z"/><path d="M691.2,512a25.52,25.52,0,0,0-18.08,7.52s-8,9-11.52,14c-55.44,79.76-147.52,132.08-252,132.08-146,0-267.92-101.92-299.2-238.48A76.57,76.57,0,1,0,59,433C93.36,595.12,237.2,716.8,409.6,716.8c119.44,0,225-58.56,290.08-148.4,2.8-3.84,12.16-15.76,13.6-18.16a24.21,24.21,0,0,0,3.52-12.64A25.58,25.58,0,0,0,691.2,512ZM76.8,384a25.6,25.6,0,1,1,25.6-25.6A25.58,25.58,0,0,1,76.8,384Z"/></svg>
\ No newline at end of file
src/icons/svg/ic_3.svg 0 → 100644
View file @ 7052e228
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 255.98 358.35"><title>ic_画板 3</title><path d="M247.44,150.43a37.52,37.52,0,0,0-9.76-11L72.24,9.39C62.4,1.55,50.48-1.57,38.48.75c-12,2-22.48,9-29.76,19.6A49.83,49.83,0,0,0,0,49.31V309.39a49.61,49.61,0,0,0,13.44,34.48c8.72,9.36,19.92,14.48,31.92,14.48a40.69,40.69,0,0,0,26.48-9.44L237.28,219a49.72,49.72,0,0,0,18.16-32.16A53.05,53.05,0,0,0,247.44,150.43Z"/></svg>
\ No newline at end of file
src/main.js
View file @ 7052e228
......@@ -18,6 +18,8 @@ Vue.use(ElementUI)
import App from "./App";
import router from "./router";
import "@/icons"
import "./assets/css/index.css";
new Vue({
......
src/pages/example_icon.vue 0 → 100644
View file @ 7052e228
<template>
<div class="icon-main icon_act">
<svg-icon icon-class="ic_2" class="svg_out"></svg-icon>
<svg-icon icon-class="ic_3" class="svg_in"></svg-icon>
</div>
</template>
<script>
export default {
data() {
return {};
},
components: {},
mounted: function() {
// this.init();
},
computed: {},
methods: {}
};
</script>
<style scoped>
.icon-main {
margin-top: 100px;
}
.icon_act {
margin-left: 50px;
position: relative;
}
.svg_out {
font-size: 100px;
color: lawngreen;
animation: out_t;
animation-duration: 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.svg_in {
font-size: 50px;
position: absolute;
top: 25px;
left: 26px;
animation: in_t;
animation-duration: 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes out_t {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes in_t {
0% {
color: lightcoral;
}
50% {
color: #7cd21a;
}
100% {
color: lightcoral;
}
}
</style>
\ No newline at end of file
src/router/index.js
View file @ 7052e228
......@@ -50,6 +50,11 @@ export default new Router({
path: "/example_code", // 编辑器实例
name: "example_code",
component: () => import("@/pages/example_code")
},
{
path: "/example_icon", // svg 实例
name: "example_icon",
component: () => import("@/pages/example_icon")
}
]
});
yarn.lock
View file @ 7052e228
......@@ -6438,14 +6438,14 @@ supports-color@^5.3.0:
dependencies:
has-flag "^3.0.0"
svg-baker-runtime@^1.4.3:
version "1.4.3"
resolved "https://registry.yarnpkg.com/svg-baker-runtime/-/svg-baker-runtime-1.4.3.tgz#8ec035daf3af4abe7e788120868ebbf84a34468f"
integrity sha512-QY6RlJN3v6xPxVQboSrsGiLWaWay+uFstic6QEzoIUK2l6M/lqL/wiqFcoqroBsGpqpP0knXplltLZGTzncbNw==
svg-baker-runtime@^1.4.6:
version "1.4.6"
resolved "https://registry.yarnpkg.com/svg-baker-runtime/-/svg-baker-runtime-1.4.6.tgz#73499736c636610121a9e17ae6ceb2ea1023ec6b"
integrity sha512-n+Uq23mafI12WLHXahkjSY00qHJaNfeB9XgVKdo0C4kzrcn8JnunXNajvOlqkFaTqj7xT7MwTlFl3Hga8AevcQ==
dependencies:
deepmerge "1.3.2"
mitt "1.1.2"
svg-baker "^1.5.0"
svg-baker "^1.7.0"
svg-baker@^1.5.0:
version "1.5.0"
......@@ -6466,10 +6466,29 @@ svg-baker@^1.5.0:
query-string "^4.3.2"
traverse "^0.6.6"
svg-sprite-loader@^4.2.1:
version "4.2.1"
resolved "https://registry.yarnpkg.com/svg-sprite-loader/-/svg-sprite-loader-4.2.1.tgz#38a0bb9af9beecd037a0e417af56edf670fe7283"
integrity sha512-IQCJEHWD+CNP8yFptR2SkscLXBgwYwY+34VMNSLBE4RQmJ0dgpAfkF6q8ktgNsXlMhlX6cAM4Zw0t7SnLyyiQA==
svg-baker@^1.7.0:
version "1.7.0"
resolved "https://registry.yarnpkg.com/svg-baker/-/svg-baker-1.7.0.tgz#8367f78d875550c52fe4756f7303d5c5d7c2e9a7"
integrity sha512-nibslMbkXOIkqKVrfcncwha45f97fGuAOn1G99YwnwTj8kF9YiM6XexPcUso97NxOm6GsP0SIvYVIosBis1xLg==
dependencies:
bluebird "^3.5.0"
clone "^2.1.1"
he "^1.1.1"
image-size "^0.5.1"
loader-utils "^1.1.0"
merge-options "1.0.1"
micromatch "3.1.0"
postcss "^5.2.17"
postcss-prefix-selector "^1.6.0"
posthtml-rename-id "^1.0"
posthtml-svg-mode "^1.0.3"
query-string "^4.3.2"
traverse "^0.6.6"
svg-sprite-loader@^4.2.6:
version "4.2.6"
resolved "https://registry.yarnpkg.com/svg-sprite-loader/-/svg-sprite-loader-4.2.6.tgz#9f5ac6d75d78be80758966abc4210a285edb2073"
integrity sha512-NwHOcULhpKLGwQawunpcp9RmUCHbboWO94x7n8DNFHIwxYfsuvcS6s/mPCBbqLS+C9ox0F6BZZI/2vbW0RXMlQ==
dependencies:
bluebird "^3.5.0"
deepmerge "1.3.2"
......@@ -6478,7 +6497,7 @@ svg-sprite-loader@^4.2.1:
html-webpack-plugin "^3.2.0"
loader-utils "^1.1.0"
svg-baker "^1.5.0"
svg-baker-runtime "^1.4.3"
svg-baker-runtime "^1.4.6"
url-slug "2.0.0"
svgo@^1.0.0:
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment